Jump to content
GreenSock

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

GSAP ScrollTrigger horizontal scroll set start and end to section C

Go to solution Solved by akapowl,

Recommended Posts

I created this simple horizontal scroll, and I want to set start and end point to each section so I can individually target them for animation.

Right now I'm facing issue to set Start: and End: point to SectionC (or any section), I can target a section for animation but start and end point not matching targeted section width.

See the Pen BaRoVrB?editors=0010 by AkhilRaja (@AkhilRaja) on CodePen

Link to comment
Share on other sites

image.thumb.png.0ff124a82589231e5e8ca608749c5014.png

i want that when i reach to SectionC, Start: and End: should be like this

Link to comment
Share on other sites

  • Solution

 

Hey @AkhilRaja,

 

I feel like I've already given you some direction on how to trigger animations for individual sections in a fake-horizontal-scroll scenario in this recent thread

 

 

 

In your codepen above, you did not set an end for your ScrollTrigger - which makes it pretty much unusable - so I suggest, you change that.

 

If you set it to...

 

end: "+=" + (document.querySelector('#PageWrap').scrollWidth - window.innerWidth)

 

...you won't even have to worry about that 'offset' for your calculations to take into account I mentioned in that other thread, but can calculate things based soleley on the offsetLeft of your section in combination with the window's width (which is neccessary for adjusting the trigger's start depending on where in the viewport you want it to trigger).

 

For example...

 

start: () => "top top-=" + (document.querySelector("#SectionC").offsetLeft - window.innerWidth),
end: () => "+=" + document.querySelector("#SectionC").offsetWidth,

 

...would trigger when the left side of your section hits the right side of the window and scrub for the width of that section - so in this case the end of the scrub would be when the left side of your section hits the left side of the window.

 

You won't get to use your markers as you wish though within this kind of scenario, as the triggering is dependent on the vertical top of the section here and just due to how this whole concept works, it will be way above the top of your window and thus out of view.

 

Hope this helps.

Happy scrolling.

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, akapowl said:

start: () => "top top-=" + (document.querySelector("#SectionC").offsetLeft - window.innerWidth), end: () => "+=" + document.querySelector("#SectionC").offsetWidth,

Thank you sir its worked.

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.

×