GSAP Prevent pinned section overlapping animated sequence

[BigHoot]

Hi guys,

so I'm back again now that I have some free times to do stuff like my portfolio. My problem is quite simple, I've made an animated sequence and pinned sections.
The scheme would be pretty much like : 
 - Animated Sequence #1
- Pinned section
- Animated Sequence #2
- Pinned section
And so on.

The problem is : my first pinned section is overlapping the previous animated sequence, which I don't want. I'd like my pinned section to wait until the sequence is fully complete.
I couldn't link my own animated sequence in codepen for an unknown reason. So I replaced it with Airpod's. 

If you wanna take a look at it : http://www.bighoot.net

I feel a bit overwhelmed as I'm playing with functions I don't fully understand. I know you guys would be able to solve it quickly, but what would be amazingly wonderful is a lil bit of explanations !

I've seen topics here and there but I didn't understand much things (I'm a beginner in JS).

Thanks a lot guys and keep up the good work, you guys are awesome !

See the Pen NWMaeMX by hopyrevenge (@hopyrevenge) on CodePen

[Rodrigo]

Well that animation is a hoot!!!  (sorry couldn't resist 😆) Great job.

 

Basically you have to play with the height of the canvas container and the endpoint of your scroll trigger instance. This configuration in the example with the airpods seems to work fine:

gsap.to(owlHead, {
  frame: frameCountAnim1 - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
    scrub: 0.5,
    end: "+=350%", // <- THIS
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

Since your section height is 400vh and the default start point it "top top", the duration of your ScrollTrigger instance should go between 300% and 400% of the viewport height (don't worry ScrollTrigger does everything for you behind the scenes, you just have to give the instructions). Do some trial and error until you find the right configuration. An endpoint of "+=400%" will finish the animation as the next section enters the bottom of the viewport, while a "+=350%" will finish the animation as the next section top is at the center of the viewport and so forth.

 

You can find more about it in the Scroll Trigger docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Happy Tweening!!!

[BigHoot]

Dude, you're the best.

Not only it worked with the hoot animation (300%), but I did understand what I was doing wrong. Thanks a lot brother !
Now I can stop banging my head against the wall and go to sleep, it's 6am in France :D.

Thanks again for your support. This forum, I swear, is incredible.