Jump to content


How can I create this effect using 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

Hello all, 

 I am newbie and just started to learn GSAP technology in my company. I have asked to create this effect using GSAP. I tried my best to find scrollTop of current message and fail to apply autoAlpha on it. Will you just check both images and can someone tell me how can I create fadein and fadeout effect scrolling up and down. I want to show current message with opacity 1 and last message with 0.5 and last second message 0.25 and so on. And when I scroll down messages opacity should change as per scroll. Please need someone early help to achieve this. Thanks in advance.



See the Pen qpLxvz by LeoZoe (@LeoZoe) on CodePen

Link to comment
Share on other sites

You want those divs to move up and down and have them fade in/out or you want to scroll the page and whichever div is in view should be opaque and others start fading out as they scroll out of view?

Link to comment
Share on other sites

Here is demo with ScrollMagic. It has really easy learning curve depending on your experience with GSAP.


  1. Link to video tutorials: https://www.youtube.com/watch?v=QpedXxC0e5o&list=PLkEZWD8wbltnyDKWAgQfRDP_l0BC-zlU-
  2. Link to examples page with enough examples to do almost everything: http://scrollmagic.io/examples/basic/responsive_duration.html

Though ScrollMagic is getting out of date so you may want to look for other methods and libraries, following thread discusses different approaches.



See the Pen jYdJje?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Thank you for your help first of all. It really works great! But can we achieve this without using ScrollMagic plugin? Just curious. You can only explain.

Link to comment
Share on other sites

Have you gone through the thread I mentioned? If you are looking to create something similar that people usually do with scrollmagic throughout your project then there are some approaches that you can take.


If you just want to fade opacity then following demo shows how you can do that with pure JavaScript and GSAP. If that doesn't help, then post your reduced case demo so we can see what you are doing and what you wanna do.


See the Pen GQgWrY?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 5
Link to comment
Share on other sites

Great examples, Sahil. The last one was very clever.






For scroll-driven animation it is probably easiest to learn the basics of ScrollMagic. As Sahil pointed out, there are other ways, some of which are documented throughout the forums. We really do have to keep our support focused on the GSAP API and its features. We just don't have the resources to provide alternate solutions to other libraries that already do what they do really well. 



  • Like 2
Link to comment
Share on other sites

Thank you Sahil. I have checked the doc and try to use triggerhook and offset properties to achieve what I have to achieve as I shown in image. I want trigger start position at the bottom. And I don't know why it's adding extra space after last div using scrollMagic?

Link to comment
Share on other sites

One more thing how can I set trigger position at the bottom somewhere instead of default center position. I tried triggerPosition and scrollOffset but seems it is not working.


Link to comment
Share on other sites

The extra space is just because of those indicators which are only used for debugging purposes, if you comment out 'addIndicators()' line, you can see how it will look without indicators.


Trigger position can be changed using triggerHook. 1 means 100% of viewport 0.9 means 90 and so on. Again, the video tutorials I posted in my previous reply, they explain all the basic stuff including triggerHook. Then the examples page shows every possible use case.


See the Pen rJVjpb?editors=0010 by Sahil89 (@Sahil89) on CodePen


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