ScrollTrigger Horizontal with animation

[BeatlesBOB 2 Likes (Newbie)]

Hi everyone, I'm trying to make an horizontal scroll, that I understand. I'm not very good at math and logic but I want to make like when u scroll the scale of the section goes .5 then back to normal.

 

I have seen plenty of exemple but i cannot figure what logic is behind.

Sorry for my english.

See the Pen eYWMrEW by beatlesbob (@beatlesbob) on CodePen

[Cassie 5,387 Likes (Superhero)]

Hey there @BeatlesBOB

One way could be to hook into the scroll velocity - here's a demo to set you off.

 

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen

[BeatlesBOB 2 Likes (Newbie)]

Hi @Cassie thank you very much for your reply, I'm sur it will help now or later. I'm actually struggling on even more basic thing since I'm discovering Gsap.

Like in the codepen sample when I remove markers nothing happen it's like markers unlock the scroll.

To do the expect effect i was using like Intersection observer but I'm sur we can know current section using only Gsap witch I'm sure it's more relevant. 

[Cassie 5,387 Likes (Superhero)]

46 minutes ago, BeatlesBOB said:

Like in the codepen sample when I remove markers nothing happen it's like markers unlock the scroll.

Sorry I don't understand this, could you rephrase it at all?

(p.s It's not working right now because you're trying to pass index to section.clientHeight and that's not a function.)

[BeatlesBOB 2 Likes (Newbie)]

I'm really sorry for my English, I wanted to say that when I pass the markers to : true, I could scroll again in the different sections. And  section.clientHeight return me the current height of my section

[Cassie 5,387 Likes (Superhero)]

No worries! I think I understand now.

Markers certainly shouldn't affect scroll at all, Have you got a minimal demo of this happening?

[BeatlesBOB 2 Likes (Newbie)]

Yea fore sure : 

See the Pen eYWMrEW by beatlesbob (@beatlesbob) on CodePen

.

To replicate my issue, just put an markers : true and it will scroll again

[GreenSock 18,577 Likes (Superhero)]

It totally makes sense that if ScrollTrigger puts the end marker in there, it would make your page taller. Right? I'm struggling to see what the confusion is about here. And of course markers are only intended to be used during development, so they wouldn't affect a deployed site. 

 

If you want the page to be scrollable, you have several options: 

1. Don't set pinSpacing: false (I'm curious why you did that)
2. Set the height of your containing element to be the correct height according to however many sections you have. Maybe 400vh, for example. 
3. Set the height dynamically via JavaScript (same concept, just on the JS level instead of CSS)