Jump to content
Search Community

Tween the progress of a timeline back and forth with 'gsap.to' method

bromel test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

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