Tween to Progress instead of Jump

[ebinabo]

Hi all,

I have a scroll trigger animation that has buttons. I want a user to click on one of the buttons and have the animation tween to that position. 

I tried this with `.seek()` and `.progress()`, both of them jump to the particular spot.

I would like to have the object tween to the spot instead of jump to it, I've added a small example of the current behavior

See the Pen ExLmGwK by ebinabo (@ebinabo) on CodePen.

[Carl]

thanks for the demo.

 

you can tween the progress() of an animation like so

 

gsap.to(animation, {progress:value})

 

See the Pen rNvmPaj?editors=1010 by snorkltv (@snorkltv) on CodePen.

 

Your demo did not include ScrollTrigger so I'm not exactly sure how you intend to use that. 

With ScrollTrigger animations you may need to force the page to scroll using ScrollToPlugin.

 

https://greensock.com/docs/v3/Plugins/ScrollToPlugin

 

feel free to fork and modify the demo to make it more clear how ScrollTrigger will be involved.

[ebinabo]

I'm calling the animation outside of the scrollTrigger, I should be able to reproduce the example.

However, I'm getting this error in my console when I try to animate progress

[Carl]

Sorry, without seeing the code that error doesn't give us much to work on.

There is nothing in the example I provided that requires the use of a plugin.

My only guess is that whatever you are tweening the progress of isn't an animation with progress() method. ?‍♂️

 

perhaps before the tween that gives the error you can log

console.log(animation) // does the target of your tween exist?

console.log(animation.progress()) // does it have a progress() method



//your tween

gsap.to(animation, {progress:value});

 

replace "animation" with the name of the tween you are controlling.

 

you may have to register ScrollTrigger, but I don't think it's related to that error.

gsap.registerPlugin(ScrollTrigger); 

 

[ebinabo]

@Carl thank you so much. Replacing the element with the animation I was trying to tween worked fine!

[Carl]

glad to hear you got it working