Pinned Scroll Trigger Effects

[Vasil]

Hello good fellas, I am currently working on a small but complex project with a tight deadline. The client wants to reproduce two of the effects from this sample website:

 

Share and explore incredible stories. (thestorio.com)

 

I noticed these guys use GSAP, so I was wondering if anyone could share something similar on how it's done. I would be very grateful.

You can assume that I am specifying the pinned elements and transitions on scroll from these sections:

Section N1:


Section N2:

Thank you in advance!

[Rodrigo]

Hi,

 

The simplest way I can think of is using Clip Path:

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

 

You can create a combination of ClipPath with CSS Variables for targeting multiple elements:

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

 

Another option could be masking:

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

 

Hopefully this helps.

Happy Tweening!