Jump to content
Search Community

Tween to Progress instead of Jump

ebinabo test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • Solution

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); 

 

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