slowing down scroll animation SM + GSAP

[sashaikevich]

I know scrollmagic isn't a greensock product, but I'm hoping there is a parameter in GSAP that I can adjust?

 

I've got an animation I'm happy with, but for the speed. It's bound to the scroll, and it's a bit too fast. 

Is there a way for me to "slow down" the scroll? 

 

 

I created another animation which has a speed close to what I want by pinnning everything and moving it offscreen as the user scrolls, but that comes with its own problems:
- my reveal animations are gone (their progess is bound to scroll position)

- it's not really responsive. Some rows have more items than others, so different rows get different "on screen" time. 

- there is extra white space all around my animation

 

See the Pen NWKJgxR?editors=0110 by etamsasha (@etamsasha) on CodePen

 

Any ideas?

See the Pen YzKBOVQ?editors=0010 by etamsasha (@etamsasha) on CodePen

[ZachSaucier]

1 hour ago, sashaikevich said:

it's a bit too fast

What's a bit too fast? The scroll itself? The animations that play on scroll?

 

1 hour ago, sashaikevich said:

my reveal animations are gone

That's because you're attaching their progress directly based on the scroll position. If you want them to just play, structure it like your first demo.

 

1 hour ago, sashaikevich said:

it's not really responsive

Most animations who's timing is based on the scroll position are not because it usually changes whenever you resize the page. You need to add additional logic to make it responsive. 

 

Try one of these approaches:

 

1 hour ago, sashaikevich said:

there is extra white space all around my animation

You have max-width: 90%; on your section element...

[sashaikevich]

 

22 hours ago, ZachSaucier said:

What's a bit too fast? The scroll itself? The animations that play on scroll?

If the scroll speed to animation progess is currently at 1:1, I want it to be around 3:2 or even 2:1.

SM has the duration value that would normally take care of this, and GS has timeScale, but since the elements are unpinned and since the animations are bound to scroll, neither seems to be of help here.

 

The obvious solution is to pin and offset the container so the container would scroll in the opposite direction to user's scroll. As long as it moves <1px up for every 1 px the user scroll down, the individual animations (children of container) would still trigger. This solution is a bit hacky though (I've updated the pen: 

See the Pen YzKBOVQ by etamsasha (@etamsasha) on CodePen

 ), so I was seeking some help from experts in my original question.

I guess I will continue with this, since it works, and the hacky code only bothers me and no one else

I do still have white space that I need to get rid of. The space above is gone now, but there is still the space below added by the pin-spacer element, and visible because I offset the container. Any ideas how I can get rid of it?

 

 

[ZachSaucier]

2 hours ago, sashaikevich said:

there is still the space below added by the pin-spacer element, and visible because I offset the container. Any ideas how I can get rid of it?

Do you mean the white space or the gray space? If you mean the gray space, delete the padding top that you added to .spacer. If you mean the white space, it has to do with your ScrollMagic setup, so I will leave that to you to fix since it's unrelated to GSAP.