Timeline 13

ImageButtonsBackground ImageList147 nodes · 51 styles

Description

Centered alternating timeline with large images on opposite sides from text entries, featuring dates, headings, descriptions, and buttons in a zigzag layout

Detailed Analysis

This timeline presents a visually striking alternating layout where images and text content swap sides along a central vertical line. Entries feature a large image placeholder on one side and text content (date, heading, body, buttons) on the other, alternating with each entry. The centered header includes tagline, heading, paragraph, and buttons. Dot markers on the central line connect to each entry, creating an engaging visual narrative.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

alternating timelineimage timelinezigzag layoutvisual timelinecentered timelinemilestoneschronologicaldate markerscompany historymedia timelinetwo-column layoutbuttonsstorytellingvisual history

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3437",
          "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|e685653d-da06-62ff-c116-a73c59101d70",
            "appliesTo": "CLASS",
            "styleBlockIds": [
              "de0a7746-c59e-538e-233d-5b632f9c0f15"
            ]
          },
          "targets": [
            {
              "id": "65e1215e005c55ebd076fa03|e685653d-da06-62ff-c116-a73c59101d70",
              "appliesTo": "CLASS",
              "styleBlockIds": [
                "de0a7746-c59e-538e-233d-5b632f9c0f15"
              ]
            }
          ],
          "createdOn": 1709650460343,
          "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-3437", "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|e685653d-da06-62ff-c116-a73c59101d70", "appliesTo": "CLASS", "styleBlockIds": [ "de0a7746-c59e-538e-233d-5b632f9c0f15" ] }, "targets": [ { "id": "65e1215e005c55ebd076fa03|e685653d-da06-62ff-c116-a73c59101d70", "appliesTo": "CLASS", "styleBlockIds": [ "de0a7746-c59e-538e-233d-5b632f9c0f15" ] } ], "createdOn": 1709650460343, "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)