Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
marko krstic

Fade in fade out with ScrollMagic

Recommended Posts

Can someone please help me to animate fade in .box-1,  .box-2,  .box-3, then they are sections are pinned and to fade it out when they are unpined ( start moving again ).


I'm busting my head for couple of hours now :((((  

See the Pen VJRgvV by krstivoja (@krstivoja) on CodePen

Link to post
Share on other sites

Hey marko,


I don't use ScrollMagic, but your demo reminds me a lot of one of @PointC's demos. It uses jQuery but you can do the exact same thing using vanilla JS's .forEach and .querySelector methods:


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


It's from his recent article on GSAP + ScrollMagic. You can read the whole thing here.


Happy tweening :)

  • Like 2
Link to post
Share on other sites

Hey @ZachSaucier Thanks for reply but that doesn't solve my problem. I managed to fade in but I can not do fade out when section start going away...

Link to post
Share on other sites

Is this what you need?


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


Just FYI — ScrollMagic is not a GreenSock product, but the article @ZachSaucier mentioned has a lot of demos showing how to use GSAP and ScrollMagic together. Happy tweening.

  • Like 3
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.