jackkemm Posted December 18, 2024 Posted December 18, 2024 Hi there, I am currently making a horizontal scroll element and I am wanting to add markers to individual elements to trigger something to happen when they reach a certain point on the screen horizontally. I have it working for the most part, however when scrolling backwards, the first item isn't reaching that trigger point, naturally, as it starts way before that point. Is there a way to handle this? I was thinking to do something whereby if it reaches the start of the timeline again I can manually trigger something to happen 🤔 I have attached a simple set up and am console logging out the images when they reach the point, so you can what I mean about the first image once you go past it and go back. Thanks in advance See the Pen pvzebdV by jackkemm (@jackkemm) on CodePen.
Rodrigo Posted December 18, 2024 Posted December 18, 2024 Hi, You need to clamp your triggers start and end point (if needed for the end point of course): ScrollTrigger.create({ trigger: image, containerAnimation: horizontalScroll, start: "clamp(left center)", end: "right center", markers: true, id: `image-${index}`, invalidateOnRefresh: true, onEnter: () => { console.log("Enter: ", image); }, onEnterBack: () => { console.log("Enter back: ", image); } }); Watch this video Cassie made explaining how it works: Hopefully this helps Happy Tweening! 2
jackkemm Posted December 18, 2024 Author Posted December 18, 2024 Hi @Rodrigo! This is the exact video I was searching for - couldn't find it but knew it existed 🤣 I'll give this a go - thanks. 1
jackkemm Posted December 19, 2024 Author Posted December 19, 2024 Hey @Rodrigo I've tried this and isn't working as I expected. It seems the start markers are all now bunching up and triggering my `console.log`'s when scrolling down the page - however they're triggering fine on the way back - I imagine because the end marker isn't being bunched up. I've tested using this feature on the first image ScrollTrigger only, and the marker offset is more prominent now. I can see on load before I get into the pinned section, the markers start on the center of the of the center point I have set, however going backwards the marker doesn't reach that same point. Any ideas on this? Thanks!
Rodrigo Posted December 19, 2024 Posted December 19, 2024 Mhhh.. that's a bit odd, normally using this conditional logic shouldn't be needed: start: index === 0 ? "clamp(left center)" : "left center", In the case of the first element is completely expected though, consider that the element has already passed both the start and end triggers. It seems that the conditional logic you're passing is actually resolving this? See the Pen QwLpJMM by GreenSock (@GreenSock) on CodePen. Let us know if this is resolved or not and if there's anything else we can do to help Happy Tweening!
jackkemm Posted January 10 Author Posted January 10 Hey @Rodrigo, Sorry for the delay, back now from Xmas break 😍 I used the below as if I set all the images to use clamp(left center) all the markers align and trigger my console logs at the same time, and not when they get to the center point: start: index === 0 ? "clamp(left center)" : "left center", When scrolling backwards, the first pin still doesn't quite reach the center point so the first images console.log doesn't trigger. Do you know of a way to maybe offset the first images trigger to make sure it reaches for the way back? Thanks, Jack
Rodrigo Posted January 10 Posted January 10 Hey Jack, 3 hours ago, jackkemm said: I used the below as if I set all the images to use clamp(left center) all the markers align and trigger my console logs at the same time, and not when they get to the center point: I just tested the demo in your initial post as well as the demo I created and the console logs are triggered one by one as the markers reach the horizontal center of the screen. Do you have a demo that shows this? Maybe I'm missing something obvious here 🤷♂️ Regarding the callbacks with clamping I'll look into it and let you know.
jackkemm Posted January 10 Author Posted January 10 Hey @Rodrigo, Yeah sorry, they do trigger going forwards in my demo, it's going back to the start that's the issue - the very first image doesn't want to trigger. It's why I was thinking that the first trigger doesn't align correctly when the container "releases" backwards 😕 I've ended up tweaking the start/end markers to be closer to the left now rather than the center - it's not the end of the world as it's triggering/animating correctly now. Thanks for the help! Jack
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