Scroll Triggered but Independent Animation

[Colourblue]

I want to trigger an animation from a scrolltrigger in both directions, i.e it starts growing when the .intro class comes up into the viewport and then reverses when it scrolls back down again.  I am hence looking to use Toggle Actions.  I want the animation to continue unless the the class moves away.

 

I can get it to work where its fully controlled by the scroll i.e. if the user stops scrolling, the animation stops, but I want the animation to complete or complete reverse once it has been triggered.

 

In the code below, I've set it up with a separate scrolltrigger and tween, but you'll see commented out code where I tried to do it all in one.  In the current version, it says "Cannot read properties of undefined (reading 'progress')" within drawStopSign, presumably because self.progress isn't defined.  self.progress does work in the commented out consolidated version of scrolltrigger/ tween.

 

Here is my code https://svelte.dev/repl/d09e192bca00453cae102eb91b4625c3?version=3.32.3

[mvaneijgen]

Hi @Colourblue welcome to the forum!

 

What do want your animation to do? Right now there is no animation at all. I've just rotated it 360 onEnter, with the toggle actions onLeave it pauses. onEnterBack it plays from the paused state and onLeaveBack it reverses. 

 

Is that what you're looking for? Hope it helps and happy tweening! 

 

https://svelte.dev/repl/ae77ad85c8684c5780a49831c80045f2?version=3.32.3

[mvaneijgen]

Oh I see your circle element now. I've modified your tween a bit to animate the circle now. I've changed it form a .to() tween to a .from() and set your circle r to it's default 400, now GSAP will handle all the animation. This way you fully use GSAP instead of having an empty tween as a work around. 

 

https://svelte.dev/repl/7fea8793e01847e6bc5d6abc6ca350ad?version=3.32.3

[Colourblue]

Thanks very much mvaneijgen.  The timing of the animation does work in your code, but my actual animation is more complex (and actually comtains many circles drawn in a #each block), so I need to control it with the pointsShownNow variable rather than directly, hence my use of onUpdate and .progress().

[mvaneijgen]

I don't see why a more complex animation wouldn't work this way.  You can convert your gsap.to() tween to a timeline with which you can create a as complicated tweens as you want. Check out these awesome getting started guides:

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

You could of course use the onUpdate. Without changing your logic, this is what I get when I move the onUpdate to the ScrollTrigger object (of which onUpdate is a property). This is a valid use case, you can also abstracted out the toggleAction this way, by using onEnter, onLeave, ect (check the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/), but you are kinda then building your own ScrollTrigger logic, which if you use ScrollTrigger it self you all get that for free, it is up to you which route you want to go down, but when starting out I would go the easy route until you've got a firm grasp of the tools. Hope it helps and happy tweening! 

 

https://svelte.dev/repl/e993f7126d934d26a64090e53dbe59cf?version=3.32.3

[Rodrigo]

Hi,

 

The problem in your original repl lies here:

animation = gsap.to(".intro", {
  delay: 0, 
  duration: 5,
  paused:true,
  onUpdate: (self) => { // self -> undefined
    drawStopSign(self.progress);
  }
})

There is no param passed to the onUpdate callback, for that you have to use the onUpdateParams array, pass it directly or use it on your callback function.

https://gsap.com/docs/v3/GSAP/Tween#special-properties

 

This seems to work the way you expect:

let pointsShownNow = 0;
let animation;

function drawStopSign() {
  pointsShownNow = animation.progress() * 400;
  console.log(pointsShownNow)
}

onMount(
  async () => {
    gsap.registerPlugin(ScrollTrigger);
    animation = gsap.to(".intro", {
      delay: 0, 
      duration: 5,
      paused:true,
      onUpdate: () => {
        drawStopSign();
      }
    })

    ScrollTrigger.create ({
      trigger: ".intro", // Trigger on the last page
      start: "top top",
      end: "+=60%",
      markers: true,    
      animation: animation, // Use the GSAP animation defined above
      toggleActions: "restart pause resume reset"
    })
  })

Hopefully this helps.

Happy Tweening!