Start animation on progress of another animation which is pinned

[Garavani]

With the following code I’d like to achieve that an animation starts at a certain point of scroll triggered animation. As it is pinned I think I can not use the start and endpoints, I guess.

 

It works with the code below, but I am wondering if this is the correct way to do that.

And also I suspect that the animation will be played again and again while the progress is greater than 0.5 (the middle) on each update.

 

Is there a better way to achieve the same thing with the scrollTrigger methods?

 

Thank you in advance!

 

gsap.registerPlugin(ScrollTrigger);

const lightsOn = gsap.to(".lights", {
    opacity: 1,
    duration: .315,
    ease: "sine.Out(2)",
    paused: true
});

gsap.to("#image-1 .background", {
  scale: 0.2,
  scrollTrigger: {
    trigger: "#image-1",
    start: "top",
    end: "bottom",
    pin: true,
    scrub: 1,
    onUpdate: self => {
        if (self.progress > 0.5) {
            lightsOn.play()
        } else {
            lightsOn.reverse()
        }
    }
  }
});

 

EDIT: Or maybe it would be more appropriate to use an intersection observer for this kind of task?

[Rodrigo]

Hi @Garavani and welcome to the GreenSock forums!

 

Running some custom logic, even a small and simple one as you have in your snippet, it's always a bit expensive and wasteful in the long run.

 

In this case I'd recommend you to create a timeline instead of a tween and add a call method half way through that, something like this:

See the Pen eYPrWVN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Garavani]

Thanks so much, Rodrigo!

 

Tested it and it seems to be a really good starting point for the things I need to do!

 

Best regards,

Stefan