How to create a heartbeat animation?

Hi, I’m currently building a health and wellness magazine site and thought it might be cool to have an animated heartbeat line like an electrocardiogram just below the header nav.

Example:

Do any of you lovely people know how to go about creating one?

Thanks!


Here is my public share link: LINK
(how to access public share link)

You can create such animation with GSAP with MotionPath plugin.

You just have to animate an object(the dot) along the line.

If you want to see more project based on this go to CodePen and search for GSAP MotionPath

1 Like

Thank you Abi, I’ll be sure to have a look at this. Much appreciated!

1 Like