How to seek fromTo

[Sovai]

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

[mvaneijgen]

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

[Sovai]

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

[Sovai]

Here's an example of what m trying to achieve 

 

[mvaneijgen]

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

[Sovai]

Hi @mvaneijgen, that's exactly what I want. Once again, thank you very much

[Sovai]

Hi @mvaneijgen, I have another issue where I cannot figure it out. if the scroll container not long enough, the scroll snap not scale the element all the way to zero. please see the example below

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

Do you have any idea?

[mvaneijgen]

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