Jump to content
Search Community

Integrating CSS Transitions into Timeline

BornToCreate test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

 

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...