Fading Elements Inside Pinned Container While Scrolling

[Daqu]

I want to make an effect like it is on this page: https://www.tagheuer.com/int/en/smartwatches/tagheuer-connected-collaboration.html

 

Scroll down to the area where the watch face is on the right side and on the left side texts are fade/changing one-by-one depending on page scroll amount.

 

I made a simple Codepen example without fades.

 

 

See the Pen QWvYdQL by giorgi-khachapuridze (@giorgi-khachapuridze) on CodePen

[Cassie]

 

Hey there Daqu,

 

Welcome to the forums. 🥳

In order to achieve this you'll need to position all the text on top of each of each other using CSS - then use opacity or autoAlpha to fade them in and out on that timeline. You can use scrub:true to link the animations to the scroll position

I've commented out the third text for simplicity and added in some simple transitions to demo this for you

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