Scroll Trigger with clippath image on my 2nd section

[Louienator]

Hello again GSAP friends me again, got another head scratching that I cannot understand about scrollTrigger and clipPath. I want that when you scroll on the 2nd section, you can see the initial rectangle then, when you scrub the scroller, it will show the rest of the clipped image.

Here's my fiddle: https://jsfiddle.net/6p4jmght/117/

Cheers

[mvaneijgen]

I would start by disabling everything except HTML and CSS and make sure your layout it looking like you expect before adding an animation. As you can see below you pen with no GSAP and nothing is visible. Hope it helps and happy tweening! 

 

https://jsfiddle.net/v4gdknsq/

[Louienator]

Hi @mvaneijgen, i think i got it.. and the my last problem is that. And lastly, how can you stop scrolling when it reaches the last section/image..


Here's my fiddle:

https://jsfiddle.net/f6dhksj1/50/

[mvaneijgen]

Here is an example that mixes normal scroll with the Observer plugin. It has an observer section, but when it then is at the end it disable the observer and starts scrolling normally again.

 

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