Jump to content
Search Community

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

aszuster test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

 

 

  • Like 2
Link to comment
Share on other sites

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!

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.
×
×
  • Create New...