bromel Posted May 22, 2020 Share Posted May 22, 2020 Hello all 😊  I have been trying to learn the new GSAP 3 and I am not sure how to tween the progress of a timeline correctly.  What I have done is created a timeline that plays a simple animation but in time this will be replaced by a more complex one. In my example I have created a drop-down menu with various cities to select and I am wanting to control the progress of the animation based on this selection. As you can see I am able to change the progress value for my tween, but I am getting unexpected results, as an example I go from 'please choose one' to 'London' in the expected manner but from 'london' to 'please choose one' behaviors in an unexpected manner. I assume that i am just approach this wrong so I was wondering what is the best way to achieve smooth and even transitions between all the values of the select menu.  many thanks. See the Pen yLYwyWp?editors=1011 by w9914420 (@w9914420) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 22, 2020 Share Posted May 22, 2020 Hey bromel, glad to see you getting around to using GSAP 3   The core issue here is that you're adding to the timeline every time, so the timeline gets longer and longer, thus the progress isn't what you think it is after the first time. What you should do instead is create the timeline fully outside of the callback and inside the callback just animate the progress. I talk more about that approach in my article on animating efficiently. See the Pen mdeoemx?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
bromel Posted May 23, 2020 Author Share Posted May 23, 2020 @ZachSaucier Many thanks I can see where I was going wrong, and thanks for the article link, very insightful Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now