CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Anon Nymous
Anon Nymous

Reputation: 25

How do I efficiently create a chronological animation-timeline in CSS or Javascript?

I'm currently working on a new project and only just started diving deep into CSS animations. My question is: how do I create a timeline of animation ques? Meaning, how do I let one animation run after the other one ends, EFFICIENTLY..?

An example of what I'm trying to achieve: https://www.v2.aristidebenoist.com/

Upvotes: 0

Views: 1704

Answers (3)

CSSBurner
CSSBurner

Reputation: 1991

This is being addressed in CSS Animations 2 via the animation-timeline property:

animation-timeline: auto | none | <timeline-name>

This property gives the user greater control over synchronizing / de-synchronizing CSS animations.

Currently (June 2021), this property is not supported by any browsers, but CSS implementations do move quickly some times!

Upvotes: 1

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Greensock.js is the way to go in my opinion. You can script everything with fine grained detail and it has a ton of useful plugins and built in tools for common animation needs:

https://greensock.com/timelinelite

Upvotes: 1

Geuis
Geuis

Reputation: 42277

Look into CSS keyframes: https://css-tricks.com/snippets/css/keyframe-animation-syntax/ and https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

You can create a series of different keyframe sets, then trigger different ones by updating classes on root containing elements with javascript for example.

On the MDN link, look further down the page for the animation events documentation. You can hook into those to know when animations start/iterate/end.

Upvotes: 1

Related Questions