ScrollTrigger Animation not starting at 0

[ianatkins]

Hello.

 

Have an image that I'm parallaxing  with the window scroll.

 

Can see in the codepen example. The to animation doesn't start at 0, but is 2 - 7% off depending on the screen width.

 

Note in the preview below the codepen looks ok, on larger screens there is a black line above the image ( as the image is translated down already ).

 

Am new to GSAP so apologies if this is a basic question!

Thanks,

Ian.

See the Pen YzvNBXp by addedlovely (@addedlovely) on CodePen

[GreenSock]

Welcome to the forums, @ianatkins. No, it's not a basic question at all. It boils down to a math/logic issue. A few problems: 

1. You are trying to parallax on an image that's exactly the same width/height as its container, so you have zero room to move the image without creating a gap. You need to make the image bigger than its container to compensate (so you have room to move). 
2. You can't just use an arbitrary value like yPercent: 20 - you need to calculate things very precisely based on how much gap you've created with your oversizing. 

This is exactly the kind of thing that we baked into ScrollSmoother with data-size="auto". It does all the calculations for you and all you've gotta do is set up your image initially to be oversized a bit. Place it wherever you want (aligned top or bottom on the container) and it'll look at the gap and move it in the right direction by precisely however much is necessary. It's not an easy task, honestly. You essentially have to offset it (oversize) initially by however much you want, figure out the gap and direction, then animate the yPercent or y accordingly. ScrollSmoother takes it one step further by even calculating how to move it as much as possible such that the image hits the inner edge at the precise moment that edge enters the viewport, and same with the other edge on the way out. 

 

So you've got two options:

• Do those calculations manually and set things up accordingly. The basic version isn't that difficult actually, but there's some "wasted" movement due to not taking into account the overlap that'd occur while it's animating partially-intersecting with the viewport, but perhaps that doesn't matter in your case.
• Just use ScrollSmoother  (but it's a members-only plugin)

Good luck!

[ianatkins]

Hey Greensock.

 

Thanks for the reply!

 

My intention is to move the image at a slower rate than the normal scroll speed - so that a larger image asset is not needed.

 

Isn't the code translating the image element down 20%, over the scroll height of the .hero-image element? In which case when the page is not scrolled (0) the translation should also be 0. Or have I misunderstood?

 

Perhaps there is a simpler way. Can I apply 0.5 of the scrolled window offset and use that as the translate value? ( again think this should avoid needing to oversize the asset ).

 

Thanks,

 

Ian.

 

[mvaneijgen]

1 hour ago, ianatkins said:

Isn't the code translating the image element down 20%, over the scroll height of the .hero-image element? In which case when the page is not scrolled (0) the translation should also be 0. Or have I misunderstood?

 

Yes, this could be the case, but you have to tell ScrollTrigger this is the behavior you want. You've not set the start: property of your ScrollTrigger thus it was at its default location at the bottom of the browser, because of this the animation will have been played already because the start trigger was already past its start point, as you can see in the markers of your original demo. There is a lot of useful information on the docs, see: https://greensock.com/docs/v3/Plugins/ScrollTrigger, also all the videos on there are really insightful and will get your up and running really fast.

 

If I read your question correctly you want to have it start as soon as the page scrolls, so I've set it to start at 80px from the top of the browser when it hits the top of the element. Now as soon as you scroll (because the element is also 80px from the top of the browser) it will start to animate in the direction you set it to animate. You would need to calculate this 80px, because it probably isn't always 80px on any screen size. 

 

I've also removed your first tween because this will do nothing if the element is already at yPercent: 0. 

 

See the Pen VwdpKPJ by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening! 

[ianatkins]

@mvaneijgenGreat thanks very much, spot on and all makes sense. I had tried setting start to 80, but it didn't seem to work - will check out the + notation.  Thanks!

 

Last query, is there anyway to apply a multiplier to the scroll amount, essentially slowing the translation by a factor ( e.g. for every 1 pixel scrolled the element is translated 0.5, or similar )?

[mvaneijgen]

7 minutes ago, ianatkins said:

Last query, is there anyway to apply a multiplier to the scroll amount, essentially slowing the translation by a factor ( e.g. for every 1 pixel scrolled the element is translated 0.5, or similar )?

Sure you can, but this you have to calculate your self, eg what is the scroll distance? And how much do you want the element to travel. Right now the travel is 20% of the height of the element and the scroll distance is the height of the element - 80px.

 

If you want this to happen auto-magicly that is what the ScrollSmoother plugin is for. There you can just give the element data-speed="0.5" to have it scroll lag behind half of the scrolled distance  https://greensock.com/docs/v3/Plugins/ScrollSmoother