Fade In and Fade Out while using ScrollMagic

[noeyeat]

I'm trying to make the slides title fade out / fade in (next one) when I have half of each slide on my screen. Is it possible? I couldn't find an example for this kinda of tweenig.

See the Pen YjGYRa by anon (@anon) on CodePen

[Sahil]

ScrollMagic supports horizontal scrolling, you need to set vertical property to false when defining controller.

 

http://scrollmagic.io/examples/basic/going_horizontal.html

 

Take a look at following thread for how you can scroll horizontally using mouse wheel.

 

 

Using ScrollMagic horizontally will let you define your scenes as you want. Take look at other demos in the scrollmagic's examples page, it covers almost all possible scenarios.

[PointC]

I'd echo @Sahil's advice about checking out the ScrollMagic demos and creating separate scenes. That being said, you can make it work with one timeline like you have it now. You'd just add your title fade tweens and some position parameter labels. 

 

See the Pen vayLYy by PointC (@PointC) on CodePen

More info about the position parameter:

https://greensock.com/position-parameter

 

Happy tweening.

 

[noeyeat]

15 hours ago, Sahil said:

ScrollMagic supports horizontal scrolling, you need to set vertical property to false when defining controller.

 

http://scrollmagic.io/examples/basic/going_horizontal.html

 

Take a look at following thread for how you can scroll horizontally using mouse wheel.

 

 

Using ScrollMagic horizontally will let you define your scenes as you want. Take look at other demos in the scrollmagic's examples page, it covers almost all possible scenarios.

I will definitely check the examples. Thanks for the advice.

[noeyeat]

6 hours ago, PointC said:

I'd echo @Sahil's advice about checking out the ScrollMagic demos and creating separate scenes. That being said, you can make it work with one timeline like you have it now. You'd just add your title fade tweens and some position parameter labels. 

 

See the Pen vayLYy by PointC (@PointC) on CodePen

More info about the position parameter:

https://greensock.com/position-parameter

 

Happy tweening.

 

I will definitely check the examples but your edit is pretty much what I'm trying to achieve. Thank you so much!