Jump to content


How do i do fade in / fade out effect in ScrollMagic + gsap ?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,


I'm trying to do a fadein and fadeout effect on pinned sections using scrollmagic and gsap. However, i seem only to be able to do either a fadein effect or a fadeout effect only, what im trying to achieve is fading in and fading out as im scrolling and having the text still pinned while both effects applied. Here is a fiddle of what im having right now. Any help is very very much appreciated.


NOTE: from the fiddle it might look like i can already achieve a fadein / fadeout effect from the 2nd section to 3rd section, where ACTUALLY the 3rd section just has a fadein effect.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo. It looks like you have a good handle on the GSAP API. I really don't understand ScrollMagic enough to be able to help you.

It's not a GreenSock product. 


From the Github page it appears it is being developed again. For support try: https://github.com/janpaepke/ScrollMagic/issues


If you have GSAP questions we'll do our best to help.


Link to comment
Share on other sites

Hi @yomamen


Adding CSS `margin-bottom:-100vh;` to your `.first` class seems to help. This pulls the section up to overlap the sections and create the x-fade effect.



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.