There is a large spacing when using horizontal scroll with scrolltrigger

[dingkai031]

Hello lovely community of gsap 💌, I'm new with gsap I hope that someone can help me.

So, my problem is. In my container there is 2 part of div, the first one show directly and the second one only show  if the user scroll more to the bottom.

But the second one doesn't show fully, only half of it.

 

And I want the second one to be fully shows.

 

Thank you

See the Pen Jjxwxdp by dingkai031 (@dingkai031) on CodePen

[mvaneijgen]

Hi @dingkai031 welcome to the forum!

 

Thanks for sharing such a great demo! What I personally like to do is normalise all the elements that I'm going to animate. That means they all start from the same position and I move them in and out from that place with GSAP, this makes it so that all the animations can be the same (or different), because I know from where they start. 

 

Check it out. It's kinda a mess, but that is great. All the elements we're going to animate are in the same position, so now we only have to move them .from() and .to() somewhere and we don't have to do weird calculations to get them to the same point (the middle of your box), because they are already there! 

 

See the Pen KKJbEMQ?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

It is much easer to remove ScrollTrigger from the setup, because all it's doing is animating the thing on scroll, so we first have to fix the animation before we can introduce it. This saves a lot of time when debugging. I've only used .to() and .from() tweens, .fromTo() is great if you need it, but I find that you hardly need it with this method and GSAP is smart and it will animate to the browsers defaults if you don't set any. eg opacity: 1 is a default state of an element, so if you do .from() opacity: 0 it will animate to 1.

 

See the Pen LYqMabP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

And than at last, ScrollTrigger. I've set your snap: property to an array, but there are a lot more settings you can use (check the docs for that https://gsap.com/docs/v3/Plugins/ScrollTrigger/) the main thing is that you want to animate to points on a timeline and we use its progress for that eg 0 is the start and 1 is the end. You have 3 elements one at 0, the middle at 0.5 and the last one at 1, so that is what we use for the snap points. Hope it helps and happy tweening! 

 

See the Pen JjxwzEQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[dingkai031]

Ahhh, thank you for the explanation! it's really  helpfull,, 

Previously I find it really hard to understand the docs. I've just learned about the snap part just now.

 

Thank you!

[mvaneijgen]

2 minutes ago, dingkai031 said:

Previously I find it really hard to understand the docs

Yeah, just reading them can be really abstract, I always have a Codepen open and just try things to see them in action. That is the best way to learn!

 

Glad it helpt! Happy tweening.