Jump to content
Search Community

Pinned Scroll Trigger Effects

Vasil test
Moderator Tag

Recommended Posts

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!

Link to comment
Share on other sites



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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...