Jump to content
Search Community

Master Tl - Why the time transition is not respected ?

Laurie 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, I'm Laurie !

 

I have created a codepen to explain my question, here's the link :

 

I have 3 blocks, and I want 3 different transformations for each. So I created a loop, and different functions with in a TimelineMax.

So, inside the for loop, I created my Master Timeline, to add each function I created before. Why did I do that ? Before on mouseover event I want to play the Master Tl, and on mouseleave event I want to reverse that animation. Perhaps this is not a good way to do that ?

My problem is : the color transition is not respected. I don't know why but on mouseover (or mouseleave) the time is not 1s like I wrote. 

 

Please, do you have an answer to this problem ?

 

Thanks a lot !!! ?

 

See the Pen PreNWM by anon (@anon) on CodePen

Link to comment
Share on other sites

Hey Laurie and welcome. Great job with the demo! Your approach is a good one.

 

The main issue is that you should be animating the backgroundColor property because the background property is just shorthand for a bunch of other background properties. Doing that fixes your animation issue.

 

See the Pen mZLrPp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

As for your approach in general, like I said yours is a good one. One other potential issue is that you are creating all three timelines for each box but only using 1 of each 3, which is somewhat of an issue though. You could avoid that by simply creating the timelines before the loop, putting them into an array, and referencing to the array in the loop. But I might change the whole logic to make it a bit simpler and easier to update by using an array of objects to determine the parameters for each box like so: 

 

See the Pen vqjXWd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Thanks a lot Zach. 

 

By the way, I'm confronted to a new (little) problem. If I don't use reverse(), but another animation I saw the play() function works only one time. Perhaps I made a mistake. But, looks weird. Any suggestion or idea ? Thanks again. Have a great day !

Link to comment
Share on other sites

Thanks for the demo, it really helps show what's currently wrong with your project :)

 

The main thing is that you are adding the functions to the timeline, not the actual returned timeline objects. You need to make sure to return the timeline in all 4 functions (you forgot in the last one) and make sure to call the function, not just pass in the function name, within each .add()  call. So for example it needs to be .add(firstMainDisappears()), not .add(firstMainDisappears)

 

After that we just need to clean up some of the timeline logic as some of it overrides others. I'm not sure exactly how you're wanting it to look, but one way would be to just reverse the animations when you hover the image like I did in the demo below. It also has the added benefit of simplifying it a bit. You might want something else in your actual project :) 

 

See the Pen RzBVLB?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
  • Thanks 1
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...