Timeline block with animated line (Interactivity API)

[colorful-tones]

I feel inspired by Keith Devon's (co-founder of Highrise Digital) original Twitter (X) share here: https://x.com/keithdevon/status/1764938947233263861?s=20

He shared a neat timeline feature he built. It is a series of grouped elements stacked vertically in reverse chronological order. Each grouped timeline event has a date, a brief description, and a picture. As the user scrolls down the page, a vertical line visually ties each event on the timeline together by animating down the page (when in scroll view).

This could be tied to a CSS class and applied to a Group or Query block wrapper, in which we could use a block variation to extend core blocks to apply the class and then utilize the Interactivity API to apply the animated line.

This would tie together a lot of new and recent stuff coming out, and I would be happy to dive in.

[colorful-tones]

Here are some screen grabs from Keith's original post. I'm awaiting to see whether he approves of attaching these visuals for inspiration only. See X (Twitter)

Keep in mind, I do not propose that we use these visuals in the final tutorial, but mostly as a starting inspirational wireframe to drive the final implementation.

[colorful-tones]

Keith Devin approves 👏 https://x.com/keithdevon/status/1768739727090290931?s=20

[flexseth]

Really like the idea! I've seen some really impressive horizontal timelines, and would like to see a horizontally scrolling timeline that can be scrolled similarly to a slider, with touch capabilities.

Here's a JavaScript library for doing so horizontally
https://timeline.knightlab.com/

[colorful-tones]

That is a different direction than what was initially proposed. It would certainly be neat to see somebody create and have a demo for this. Still, there would be a lot of accessibility considerations and challenges to work through with that type of implementation, which would increase the scope. Whereas, I believe the original timeline I proposed could likely use all native WordPress blocks and tie in a sprinkle of the Interactivity API and maybe even a few newer APIs to demonstrate to developers how these new features can be pulled together to create elegant, new experiences. 🤔

[flexseth]

No worries, Birgit wanted me to comment it here so I did :)

May be right about the accessibility, I didn't even think about that. It would be interesting to build it out and run the markup through an accessibility checker.

[colorful-tones]

Just saw another implementation of this from Multidots: https://www.multidots.com/wordpress-contribution/
Bonus: it is using core blocks and just needs to animate that line down the page. 🕺

[bph]

This topic was approved, and the conversation continues on the issue

• Timeline block with animated line #246

[colorful-tones]

This has been published. Thanks everyone for your support! 🫶
https://developer.wordpress.org/news/2024/06/13/how-to-create-an-animated-timeline-plugin/