Jump to content
Search Community

Apply multiple transform to a Three.js element with scrollTrigger

eli-ott test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello, so I have a 3D element made with Three.JS that is perfect.

I try to modify it with gsap and scrollTrigger. I tried to do it with one trigger first and it worked perfectly.

But when I try to to multiple changes to that element at different time with scrollTrigger it changes the original element's value.

Like in the codePen when you first scroll you see that the square is not really a square at the begining but when you scroll a bit more It jumps to a square. And I don't know at all why it happens. 

I also tried to put a fromTo to all but did not change a thing.

I really need help plz :)) 

See the Pen KKGdBxK by eli-ott (@eli-ott) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

You should use a Timeline and the position parameter in order to trigger all the animations at the same time:

https://greensock.com/docs/v3/GSAP/Timeline

 

Also the reason for the jump you're seeing is because you have a fromTo instance that is animating the scale on a specific axis. The issue here is that GSAP is super optimized so it records all the values at runtime and then interpolates between them. From and fromTo instances are very special since it takes the element from a value you're giving it to the value they have when the GSAP instance is created. So in this case you have a box, then GSAP creates that instance and says: "OK so take this box's scale and animate the z value from this value to this other", and GSAP does exactly what you're asking and sets the value to the one you're passing in the from config object. See the issue? The solution for this is to tell GSAP to not render or apply those changes yet using immediateRender: false in your config:

gsap.fromTo(
  box.scale,
  {
    z: 0.175,
  },
  {
    z: 0.25,
    immediateRender: false,
  }, "<"
);

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

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...