Timeline 9

ButtonsBackground ImageList143 nodes · 50 styles

Description

Centered vertical timeline with alternating left-right entry layout, header section with tagline and buttons, timeline entries featuring dates, headings, descriptions and button pairs

Detailed Analysis

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.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

alternating timelinecentered timelinezigzag layoutvertical timelinemilestoneschronologicaldate markerscompany historyeventscentered headerbuttonstaglinehistory sectionprogress indicator

Raw Data (spacer)

{
  "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)

Detailed Analysis

{ "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)