Jump to content
Search Community

ScrollTrigger "start" from center item (not parent - wrapper) if elements position absolute

_Greg _ test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi!

How can i specify for each element start position from center block (not elements wrapper) if elements has `absolute` position

 

Screenshot-2021-09-22-174231.thumb.jpg.f98caf0fdcd73206b41244caf97974c2.jpg

 

 

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

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

  • Solution

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

  • Like 1
Link to comment
Share on other sites

@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

image.thumb.png.ff7eda2ce2118a16419d5baca50cf70f.png

 

But if i looking in widget:
image.thumb.png.653af63182877c41cf4e0d698dc5344d.png

It's a bit strange 😦

Link to comment
Share on other sites

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

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? 

  • Like 2
Link to comment
Share on other sites

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

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.
×
×
  • Create New...