ScrollTrigger animation problem

[Andy777]

Hi, 

 

I have a problem on this animation. When a user scroll for the first time the first div scale to 0 and set its height to 0 then it displays none.

That's works well on first div animation but with the second div it don't work as it should do with the first.

What i am doing wrong and how i can solve that issue?

See the Pen qBMPdYx by Andy199807 (@Andy199807) on CodePen

[Cassie]

Hey, so the markers are in the wrong place as you're adjusting the height of the body.

You can call ScrollTrigger.refresh() to get around this - this works but is this really what you're going for? It seems a little odd.

See the Pen gOdGpyN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can't scroll back up and the animation happens immediately after the first ends.

[Andy777]

Why the second div animate automatically once finished the first div animation?

[Cassie]

Because the start trigger point is 'top top' - That means 'when the top of this element hits the top of the viewport.'
 

[Andy777]

I am confused dunno how to fix that issue. Do you?

[Cassie]

I don't know what you're trying to achieve! The code is currently doing what you're telling it to. What do you want to happen?

[Andy777]

the first scroll does what i want and i would like it does the same with the  second div on scrolling into it. 

Not that it does it automatically, but once is scrolling.  

[Cassie]

Sure! Well you could move the start position further down so that you have to scroll in order to hit it. i.e.

start: "10% top"
 

[Andy777]

Ok now i understood @Cassie,but if i reload the page the first and the second div are not visibile. I would like have those restart from the beginning once reload the page, how i do that?

[Cassie]

That's a browser behaviour rather than GSAP - here's some vanilla JS options.

https://stackoverflow.com/questions/3664381/force-page-scroll-position-to-top-at-page-refresh-in-html

Hope this helps!