Jump to content
Search Community

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

bromel test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi all ☺️

 

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 React.

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.

I assume that i am just approach this wrong so I was wondering what is the best way to achieve this in React.

 

Many thanks.

 

Bromel

 

P.S It seems that my method doubles the duration of the tween, but I don't know why?

See the Pen KKNovLN by w9914420 (@w9914420) on CodePen

Link to comment
Share on other sites

I'm not a React guy and I don't have much time to look into this but I definitely saw a few problems at my cursory glance: 

  1. You keep adding a 3-second tween to the same timeline each time a new selection is made - that's why the duration keeps going up. Why are you using a timeline at all? Usually those are for grouping animations and controlling them as a whole. At the very least, you could clear() the timeline before you add another to().
  2. I don't think transform: "translate(100px)" is valid - the translate() is supposed to have an x and y value. But I'd strongly recommend NOT animating the "transform" attribute at all - just use the individual transform component shortcuts like "x", "y", "scaleX", "rotation", etc. instead because those are optimized for speed and make your code more readable/concise. 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

Hi Jack,

 

Thank you for getting back to me just to clarify.

Quote
  1. I don't think transform: "translate(100px)" is valid - the translate() is supposed to have an x and y value. But I'd strongly recommend NOT animating the "transform" attribute at all - just use the individual transform component shortcuts like "x", "y", "scaleX", "rotation", etc. instead because those are optimized for speed and make your code more readable/concise. 

I based the use of 'translate(100px)' from the MDN Web Docs - translate() but I complete understand your point in regards to speed and readability.

Quote

You keep adding a 3-second tween to the same timeline each time a new selection is made - that's why the duration keeps going up. Why are you using a timeline at all? Usually those are for grouping animations and controlling them as a whole. At the very least, you could clear() the timeline before you add another to()

So this is part which I am trying to comprehend, just for some background I have based my example on this pen 

See the Pen mdeoemx by GreenSock (@GreenSock) on CodePen

 which is just using JavaScript and works similar to my react example. hence the use of the timeline.

Link to comment
Share on other sites

Hi all,

 

Just been back and had another look at this and changed a few things.

1. Using transform shortcuts

2. Stopped adding duration on selection.

 

See the Pen wvojBQV by w9914420 (@w9914420) on CodePen

 

I am just trying to understand this.

  //tween the animation in accordance to it's progress
    gsap.to(tl.current, { duration: 1, progress: count });

My expectation is that when it is called it should tween the animation forwards or backwards in process?

 

regards

 

Bromel

Link to comment
Share on other sites

  • Solution
52 minutes ago, bromel said:

My expectation is that when it is called it should tween the animation forwards or backwards in process?

It does, but you're creating a new animation each time... So the progress of the new animation is being set each time. See the issue?

 

If you include the timeline and tween creation in a useEffect with [] as the second parameter it works as I think you're wanting it to work:

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

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