How can I create this effect using GSAP?

[LeoZ]

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

[Sahil]

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?

[Sahil]

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

 

[LeoZ]

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.

[Sahil]

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

 

[Carl]

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

 

----

 

LeoZ,

 

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. 

 

 

[LeoZ]

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?

[LeoZ]

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.

 

[Sahil]

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