_Greg _ Posted September 22, 2021 Share Posted September 22, 2021 Hi! How can i specify for each element start position from center block (not elements wrapper) if elements has `absolute` position I try: elements.forEach(e=>{ gsap.to(e, { ... scrollTrigger: { start: e.offsetTop, // i try ()=>return `top+=${e.offsetTop} bottom` but does't work end: "max", invalidateOnRefresh: true, scrub: 0, markers: true } }) } but see that its work slowly Can i do the same without .forEach See the Pen oNwMxVL by gregOnCodePen (@gregOnCodePen) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 22, 2021 Share Posted September 22, 2021 Hi @_Greg _, Can you setup your codepen with your data-attributes/forEach loop? The current codepen isn't setup to help us find your solution. 1 Link to comment Share on other sites More sharing options...
_Greg _ Posted September 22, 2021 Author Share Posted September 22, 2021 @elegantseagulls Thank you! Is there a method without using .forEach()? Something like: ... start: ({element?})=>{ // how to get every element of each interation? return element.offsetTop // how to get element? } ... Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 22, 2021 Share Posted September 22, 2021 Ah, I see what you're asking! Thank you for the clarification! Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 22, 2021 Share Posted September 22, 2021 The only way I can think to do this without a forEach (or similar)--because a ScrollTrigger only has one start and end point) would be to use ScrollTrigger.batch(), but I'd imagine it handles things very similarly under the hood (as forEach), but offers different functionality.https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Link to comment Share on other sites More sharing options...
Solution GreenSock Posted September 22, 2021 Solution Share Posted September 22, 2021 Yeah, since you want each one to start at a completely different spot, you have to have a different ScrollTrigger for each, so a .forEach() is necessary. Is there some reason you're trying to avoid a .forEach()? Is this the kind of thing you're looking for? See the Pen qBjyPOw?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
_Greg _ Posted September 23, 2021 Author Share Posted September 23, 2021 @GreenSock Yes, this is exactly what I was looking for. The reason i'm trying to avoid a .forEach() - i think that gsap on animate lots of elements with one selector has a built-in method to determine the element at each iteration like y: (i, el) =>... Also, I have tried to use ScrollTrigger.batch, like @elegantseagulls wrote above, but don't understant how to use the scrub 🙁 UPD: I find See the Pen eYBJbPo?editors=0010 by GreenSock (@GreenSock) on CodePen scrub is working but again - one start point for all elements : See the Pen abwjXbR?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen If i open codepen in fullscreen - its show that all elements starts from one point But if i looking in widget: It's a bit strange 😦 Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 23, 2021 Share Posted September 23, 2021 Yes, you don't want to nest ScrollTriggers. I've not tried batching with scrub, personally, so that may require some reading/playing around.... Why are you trying to avoid a forEach? GSAP's built in functionality on that is likely not going to save you any performance in this instance. 2 Link to comment Share on other sites More sharing options...
_Greg _ Posted September 23, 2021 Author Share Posted September 23, 2021 3 hours ago, elegantseagulls said: Why are you trying to avoid a forEach? I try to learn all functionality of gsap, there is many methods witch i ever seen or use, so i ask can i use buid-in methods like ScrollTrigger.batch(). I never use it, and I think I can implement my idea with this function 😊 (its working now but only in widget in gsap site ) Link to comment Share on other sites More sharing options...
GreenSock Posted September 23, 2021 Share Posted September 23, 2021 11 hours ago, _Greg _ said: The reason i'm trying to avoid a .forEach() - i think that gsap on animate lots of elements with one selector has a built-in method to determine the element at each iteration like y: (i, el) =>... That's because in a tween with multiple targets, they can all share ONE tween (same startTime, endTime, duration, etc.) but you can't do that with a single ScrollTrigger. It wouldn't logically make sense. One ScrollTrigger can only have one "start" and one "end", but the functionality you're describing would require having different values for each. See what I mean? I'm still totally confused about why you want to avoid a .forEach() - do you think it's bad for performance or something? 2 Link to comment Share on other sites More sharing options...
_Greg _ Posted September 24, 2021 Author Share Posted September 24, 2021 @GreenSock Thank you! 12 hours ago, GreenSock said: do you think it's bad for performance or something? Yes, i think so, but not sure that it is true 😦 Link to comment Share on other sites More sharing options...
_Greg _ Posted September 24, 2021 Author Share Posted September 24, 2021 12 hours ago, GreenSock said: One ScrollTrigger can only have one "start" and one "end", but the functionality you're describing would require having different values for each I see, thank you! 12 hours ago, GreenSock said: See what I mean? I understand my misstake Link to comment Share on other sites More sharing options...
GreenSock Posted September 24, 2021 Share Posted September 24, 2021 9 hours ago, _Greg _ said: 22 hours ago, GreenSock said: do you think it's bad for performance or something? Yes, i think so, but not sure that it is true 😦 Nah, that's not true. You'd never notice a performance hit from that in any practical sense. 1 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