Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yomamen

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

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

×