Jump to content

Ahnaf Ahmed

Fade in and out transition between overlapping pinned sections with full scroll

Recommended Posts


I am trying to create an animation where the overlapping pinned sections will do a fade in and out transition with full scroll. I've been searching all over the forums and tried myself but unfortunately not being able to create what I want. Here is a minimal demohttps://codesandbox.io/s/elated-nova-bt0fl4?file=/src/App.js

By "full scroll", I mean waiting for the transition to complete even if the user forces the scroll to an in-between spot. Similar to how FullPage.js works but with fade transition instead of sliding. 

In the minimal demo, the transition happens too quickly. However, I also want to achieve a more delayed and smooth transition that is pleasing to the eye, just like every other cool animations created using GSAP!

Looking forward to some help from the community. 

Some of the threads from the forums that I have already tried taking help from which are close to what I am trying to achieve are:


I have also attached a screen recording of what I've come up with till now





See the Pen App.js by s (@s) on CodePen

Link to comment
Share on other sites

It sounds like you want the behavior of the demo below


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


If yes, then check out Observer Plugin


Chances are you'll want to mix ScrollTrigger and Observer sections so this demo may also help


See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen


hopefully these help point you in the right direction.

  • 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.