animated-timeline-plugin

A WordPress plugin that extends the Group block to create an animating timeline effect

Stars
8
Committers
1

Animated timeline plugin

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.

How to use

  1. Download this plugin as a zip (click on 'Code' and choose 'Download ZIP')
  2. Place the un-zipped directory in your WordPress wp-content/plugins directory
  3. Activate the plugin
  4. Create a new post / page and add the 'Animated Timeline' pattern.
  5. Save and preview the final animated timeline.
  6. Try editing the Advanced -> Additional CSS Classes from animated-timeline to animated-timeline animated-timeline--circles for the overall pattern's parent Group block to see the circle variation.

Feel free to fork it and use it however you like!

Changelog

June 11, 2024 - v1.0.0

Initial launch.