GSAP and scrollmagic how to reduce the space between one end and the next start

[aszuster 3 Likes (Newbie)]

Hi! I did a codepen example of the scroll animation I'm doing on a website.

Everything is working as intended: when the first div of text and image goes to opacity 0, the next one comes to opacity 1 in the same place as the last one.

But what I need to fix is that it's taking a bit more time for the next one to appear after the one before disappear, I can see that there's a bunch of padding or space between the end of one and the start of the next one and I couldn't fix it, if I change the duration the animation will go faster but there still a blank between the animations. I don't know if I need to target another thing or something like that, I hope I'm making myself clear
Thank you!

See the Pen MWQaYdm by aszuster-dhnn (@aszuster-dhnn) on CodePen

[PointC 14,185 Likes (Superhero)]

Hi @aszuster

 

ScrollMagic is not a GreenSock product so we can't offer any support for it. GS does have its own plugin - ScrollTrigger, which does everything SM can do and much more. Check it out.

Just a note - your pen is loading GSAP 3.10.3 and an old TweenMax (1.20.2). You'll want to remove that old one.

 

Please try converting your project over to ScrollTrigger and we'll be happy to assist with any GSAP related questions. There's also an expansive demo section available to help get you started.

https://greensock.com/st-demos/

 

Happy tweening.

 

 

[aszuster 3 Likes (Newbie)]

Hi @PointC ! Thanks for answering, I'm trying to convert my project to ScrollTrigger entirely but I'm not really sure how to do for my next div below to appear on opacity 1 in the exact same place as the one before.
As you scroll the first image and text should disappear and then the next image and text should appear in the same place, and then the next one like in this example https://ank.app/  (scroll a bit at the beginning), I guess it has something to do with pin maybe? But I can't seem to make it work right

Thanks!

[PointC 14,185 Likes (Superhero)]

Do you have a new demo using ScrollTrigger? Thanks.