Change opacity of element as ScrollTrigger scrolls horizontally

[amit95]

I'm using ScrollTrigger pin to turn my section into a horizontal scroll section.

 

In this section, I have an element called .horizontalScroller__intro . On scroll, say 20% of the width of .horizontalScroller__items , I'm trying to gradually fade the intro away, so that the image is the only thing in view. 

 

To achieve this, I've created a timeline, similar to the approach defined here.

 

However, in my demo, my intro disappears immediately.

 

In short:

• When scrolling down (start to end of image), slowly fade away .horizontalScroller__intro
• When scrolling up (end to start of image), slowly fade .horizontalScroller__intro back in

 

Note: Please view the pen in full view.

 

See the Pen wvPaVpz by amit_rai95 (@amit_rai95) on CodePen

[OSUblake]

Hi amit, 

 

If you'd like to control horizontal animations, check out the new containerAnimation feature added in 3.8.