AkhilRaja Posted July 4, 2021 Share Posted July 4, 2021 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 More sharing options...
AkhilRaja Posted July 4, 2021 Author Share Posted July 4, 2021 i want that when i reach to SectionC, Start: and End: should be like this Link to comment Share on other sites More sharing options...
Solution akapowl Posted July 4, 2021 Solution Share Posted July 4, 2021 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. 3 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted July 4, 2021 Author Share Posted July 4, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now