Jump to content
Search Community

Scrolltrigger and setting correct position after user mouseMove

AlbertWalicki test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

Welcome to the forums @AlbertWalicki

 

2 hours ago, AlbertWalicki said:

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 😅

 

What's a common problem?

 

A common mistake for ScrollTrigger is to create ScrollTriggers on tweens, like you have in your demo. A ScrollTrigger should either be in a standalone tween or a inside the timeline constructor.

 

// bad
gsap.timeline()
  .to(".foo", {
    scrollTrigger: { ... }
  })

// good
gsap.to(".foo", {
  scrollTrigger: { ... }
})

// good
gsap.timeline({
  scrollTrigger: { ... }
})
.to(".foo", { ... })

 

Why don't you rework that and then we can tackle your mouse movement issue.

 

 

  • Like 1
Link to comment
Share on other sites

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 😄

Link to comment
Share on other sites

37 minutes ago, AlbertWalicki said:

Isn't that a bad pattern to have multiple .gsap instances of the same element?

 

Nah. And a timeline .to is just this under the hood, so it would be creating the same amount of instances as stand alone tweens.

 

gsap.timeline()
  .add(gsap.to(".foo", { x: 100 }))
  .add(gsap.to(".foo", { y: 100 }))

 

So I'm not exactly sure what you're trying to do here, but I would not animate an element you are pinning. Instead, I would put your boxes inside the pinned element. When you want them to go back to their start just animate their x and y back to 0.

 

I didn't mess with your parallax code or the red box so ignore that part. 

 

See the Pen xxXGMjm by GreenSock (@GreenSock) on CodePen

 

  • Like 3
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...