Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BeatlesBOB

ScrollTrigger Horizontal with animation

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.)

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

No worries! I think I understand now.

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×