This WordPress plugin extends the core Group block to create an animated timeline experience with subtle animation and considerations for prefers-reduced-motion respecting a visitors preference for non-essential motion.
The final pattern is registered within the plugin, but it could also potentially be included directly in a custom WordPress theme. It can also be found on the WordPress Pattern Directory as Vertical Timeline.
There are two possible styling variations: animated-timeline and animated-timeline animated-timeline--circles.
The accompanying post resides on the WordPress Developer Blog: How to create an animated timeline plugin.
- Download this plugin as a zip (click on 'Code' and choose 'Download ZIP')
- Place the un-zipped directory in your WordPress
wp-content/pluginsdirectory - Activate the plugin
- Create a new post / page and add the 'Animated Timeline' pattern.
- Save and preview the final animated timeline.
- Try editing the Advanced -> Additional CSS Classes from
animated-timelinetoanimated-timeline animated-timeline--circlesfor the overall pattern's parent Group block to see the circle variation.
Feel free to fork it and use it however you like!
Initial launch.