Integrating CSS Transitions into Timeline

[BornToCreate 0 Likes (Newbie)]

Hello all,
JavaScript is nice n stuff but sometimes the requirements demand for CSS transitions.
For example when transitioning diffrent values based on media-queries.
Theres only the transitionend event to let people know if a transition is finished.

Is it somehow possible to integrate this behaviour into a timeline, so I am able to mix my JS and CSS animations for example by adding a callback into the timeline which returns a promise or something so that the timeline waits for the transitionend until it continues.

 

[ZachSaucier 467 Likes (Leader)]

Hey BornToCreate and welcome.

 

You can transition from different values based on the client's window size just as easily with JavaScript. There's a handy variables called innerWidth and innerHeight that you can base your logic off of. CSS animations actually perform worse and have other issues than a well performed JavaScript animation. 

 

To address your question, mixing JS and CSS animations isn't recommended because CSS animation timing is not very reliable. But your question is not very clear - do you have a particular use case or demo that you could show us? That would help us give more concrete feedback.

[OSUblake 9,990 Likes (Superhero)]

2 hours ago, BornToCreate said:

For example when transitioning diffrent values based on media-queries.

 

You can listen for media queries with JavaScript.

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

 

Although animating media queries values with CSS or JS probably isn't the best idea since the browser will be under a lot of stress recalculating the layout.

[BornToCreate 0 Likes (Newbie)]

 

16 hours ago, ZachSaucier said:

Hey BornToCreate and welcome.

 

You can transition from different values based on the client's window size just as easily with JavaScript. There's a handy variables called innerWidth and innerHeight that you can base your logic off of. CSS animations actually perform worse and have other issues than a well performed JavaScript animation. 

 

To address your question, mixing JS and CSS animations isn't recommended because CSS animation timing is not very reliable. But your question is not very clear - do you have a particular use case or demo that you could show us? That would help us give more concrete feedback.

 

The thing is, Media Queries are an already implemented feature and I dont want to put if/else clauses all over the place.
Sure I can check for innerWidth/Height but this is kind of cumbersome.
Anyway thanks for the advice and thanks to @OSUBlake for showing that feature but I did not wanted to animate media queries.
But I guess Ill have to stick to js.