
Centered vertical timeline with alternating left-right entry layout, header section with tagline and buttons, timeline entries featuring dates, headings, descriptions and button pairs
This timeline uses a centered vertical line design with entries alternating between left and right sides. The header section is center-aligned with tagline, heading, paragraph, and dual buttons. Timeline entries appear on alternating sides of the central line, each with date heading, subheading, body text, and button group. Dot markers connect entries to the vertical line. This zigzag layout creates visual interest and is effective for longer timelines.
Copy and paste directly into Webflow Designer
{
"meta": {
"droppedLinks": 0,
"dynBindRemovedCount": 0,
"unlinkedSymbolCount": 0,
"paginationRemovedCount": 0,
"dynListBindRemovedCount": 0
},
"type": "@webflow/XscpData",
"payload": {
"ix1": [],
"ix2": {
"events": [
{
"id": "e-3433",
"name": "",
"action": {
"id": "",
"config": {
"actionListId": "a-686",
"affectedElements": {}
},
"instant": true,
"actionTypeId": "GENERAL_CONTINUOUS_ACTION"
},
"config": [
{
"smoothing": 50,
"addEndOffset": false,
"startsExiting": false,
"addOffsetValue": 50,
"addStartOffset": false,
"endOffsetValue": 50,
"startsEntering": true,
"continuousParameterGroupId": "a-686-p"
}
],
"target": {
"id": "65e1215e005c55ebd076fa03|1dc590c2-f6c6-4ec5-81cf-b4c224abf3f0",
"appliesTo": "CLASS",
"styleBlockIds": [
"a4ba4803-fc63-399f-65f9-c992cbd140f2"
]
},
"targets": [
{
"id": "65e1215e005c55ebd076fa03|1dc590c2-f6c6-4ec5-81cf-b4c224abf3f0",
"appliesTo": "CLASS",
"styleBlockIds": [
"a4ba4803-fc63-399f-65f9-c992cbd140f2"
]
}
],
"createdOn": 1709650349511,
"eventTypeId": "SCROLLING_IN_VIEW",
"mediaQueries": [
"main",
"medium",
"small",
"tiny"
],
"animationType": "custom"
}
],
"actionLists": [
{
"id": "a-686",
"title": "Timeline Circle [Scroll]",
"createdOn": 1709627079937,
"continuousParameterGroups": [
{
"id": "a-686-p",
"type": "
... (truncated)