[Scrolltrigger and setting correct position after user mouseMove]

Thank you!  It should help!

[Scrolltrigger and setting correct position after user mouseMove]

Hey, @OSUblake!

I updated my Codepen. ScrollTriggers are now in separate .gsap() functions. Isn't that a bad pattern to have multiple .gsap instances of the same element? Because now I have:

• gsap timeline for element 1 ( el1 + el_pseudo animation)
• gsap.to for scrolltrigger element 1
• gsap.to for element 2
• gsap.to for scrolltrigger element 2

When I used your third example with scrollTrigger inside the timeline, and then .to, my animations were triggered only on the scroll and I don't want that 😄

[Scrolltrigger and setting correct position after user mouseMove]

Hey!

I have a problem with my small project.

1. animation of box starts from the left to 500px
2. if window.scrollY = 0, user can manipulate box with mouse
3. after at least 1px of scrolling, scrollTrigger function is triggered
    

The problem occurs when the user is moving the mouse on the screen ( it should be some kind of parallax) and there is at least 1px scroll. I would like to smoothly change the current position of the box to 'initial scrollTrigger position'. Something like snap to position? I don't know.
 

I have added another function to position those elements 
> If scrollY is bigger than 0 and less than 30px
 

But it started to get messy and started to jump all across the screen. I found GSAP Mistakes and I see that is the common problem 😅

Is there any callback to set the default position of scrollTrigger, before it starts to scroll?

PS: The red border-box is here on purpose because in my real project I have three or four similar objects like this red-border.

See the Pen d32227237f2b8927803bba0689f1ae50 by walickialbert (@walickialbert) on CodePen