Scrolling Framework stop and start onclick

[hannah_hey]

Hey guys,
Im still a little unsure on how to embed pictures in my codepen so if you cant help without the pictures it would be nice if you can tell me how to put the pictures in there.
 

Our problem

We have this simple animation (the basic framework is already done) but we want the ability to scroll to stop when the pictures like: "P1,P2,P3" are starting to glow. So the idea is that when the pictures (P1,...) are done with their scroll animation that the user cant scroll anymore and has to click the image and after that he can start scrolling again. Also the picture shouldn't be able to be clicked when its not done yet with its animation.

 

I hope you understand the problem and can give me a hand on that.
thanks

See the Pen WNazdRd by hannaaaahp (@hannaaaahp) on CodePen

[Cassie]

Hi there - Here's a fork with images

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

 

Here's some info on disabling scrolling
https://stackoverflow.com/questions/28411499/disable-scrolling-on-body

body.no-scroll {
   height: 100%;
   overflow-y: hidden;
}

You could add/remove or toggle a class  in a callback or onComplete, something like this maybe -

gsap.to(anim, {
  ...
  onComplete: () => {
    document.body.classList.add("no-scroll")
  }
})

If you need more flexibility you could use call to position a callback wherever you need it on a timeline

https://greensock.com/docs/v3/GSAP/Timeline/call()

Hope this helps!

[hannah_hey]

Hmm...  Im still pretty lost on how to include it in my code cause it seams like this is fixed and not something i can enable an disable... Maybe you can show it in a codepen how you thought to include your code...

[Cassie]

Does this help?

 

See the Pen eYPMVag?editors=1010 by GreenSock (@GreenSock) on CodePen

enabling/disabling scroll is achieved by adding/removing the CSS class added to the body