Jump to content
Search Community

How to seek fromTo

Sovai test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi, I'm new to gsap. I am trying to make this scale animation using scrollTrigger. I want the element #chart to scale 1 to 0 or 0 to 1 based on scroll position. if use pause in the middle of scrolling (scrollEnd) I want to check scroll direction and set the scale of #chart to full or zero. I try to use this

    tl.progress(1, false);

to seek the animation to full or 0 but seems its not working. Pls share your thoughts! thanks

See the Pen bGQxvvV by sovai (@sovai) on CodePen

Link to comment
Share on other sites

Hi @Sovai welcome to the forum!


There is a lot that ScrollTrigger already does for you out of the box, if you have scrub: true it will reverse the animation when you scroll back up.


What I've did to prevent confusion is put your ScrollTrigger on the timeline, it should never be on a tween (unless it is a single gsap tween). And I've changed your .fromTo() to just a .to() (the element is already at its .from() position), so right now it scales down if you scroll and if you scroll back up it scales back up. Is that what you're looking for? Hope it helps and happy tweening! 


See the Pen mdQzyyd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi @mvaneijgen, thank you for your reply. However, my goal is on the onEnd() function here


function onEnd() {
  if(direction === 1) {
    // scale the element all the way to 0
    tl.to(el, {scale: 0, width: 0, height: 0, duration: 1});
  } else if(direction === -1) {
    // scale the element all the way to 1
    tl.to(el, {scale: 1, width: '300px', height: '300px', duration: 1});

for example, when I scroll down and release, the element will check the scroll position then scale the element based on scroll direction (to full size or zero)


Here's what I tried to do so far

See the Pen oNQPKJX by sovai (@sovai) on CodePen

Link to comment
Share on other sites

  • Solution

If I understand you correctly you just want the dot to scale of or down if the user has just scrolled a little. I would use the snap feature for that. I've just set it to true, but there are a lot of options you could tweaks, see the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger


See the Pen PoxyqzE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

ScrollTrigger as the name implies works on scroll. If there is nothing to scroll it can't work.


You can look into the Observer plugin https://greensock.com/docs/v3/Plugins/Observer if you don't want things to happen on scroll but still want to trigger things on scroll interaction 


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