Jump to content
Search Community

ScrollTrigger-Tween and Click-Event-Tween interfere with each other (jumps)

noahr test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hey there,

I've got a ScrollTrigger to animate some "floating" objects (parallax) with randomly generated positions, and if I click on one of the objects, it fades out, then receives a new random position and then fades in again.

However, I am struggling to integrate all this together with the ScrollTrigger effects - As you can see in my demo, the objects jump around when spawning/scrolling, because the position is not calculated correctly anymore. 

I thought I might need to update or create a new ScrollTrigger each time I hand out a new position - how would I do something like that?

Or is there a better, more elegant solution?

Thanks a lot!

See the Pen GRBNWbL by fltng (@fltng) on CodePen

Link to comment
Share on other sites

  • Solution

I think you could simplify it to something like this: 

See the Pen KKBNqEJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The problem with your original version was that you were setting up a scroll-linked yPercent animation for each one, but then on click, you were creating a completely different (competing) yPercent animation on the same element. So they were both fighting. You can't logically have it going to two different places at the same time. So I just switched to using "y" for the enter/exit portions, and keeping "yPercent" for the standard scroll-linked animation so that there's no competing. I also cleaned up some of the other code. Like you can use .set() instead of doing a .to() with a zero duration. 

 

Is that more like what you were looking for? 

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