Infinite Rotation During Parallax

[Honiism]

Hey, I recently got into GSAP and I'm a little stuck here. In the codepen, the box constantly transforms as the mouse moves. But I also want the box to rotate 360 degrees infinitely while still having the parallax effect. If I remove the line of code I commented the parallax works but if I add it the parallax movement completely stops. Could anyone maybe direct me on what to do to fix this issue?

See the Pen abQJLNL by honiism (@honiism) on CodePen

[Rodrigo]

Hi @Honiism and welcome to the GreenSock forums!

 

The problem is that GSAP is updating the transform property of the element on every tick, so when you do that manually here:

el.style.transform = `translateX(calc(-50% + ${-xVal * speedX}px))`
  + `rotateY(${rotateDeg}deg)`
  + `translateY(calc(-50% + ${yVal * speedY}px))`
  + `perspective(2300px) translateZ(${zVal}px)`;

GSAP just overrides that. Is better to let GSAP handle the whole thing:

gsap.set(el, {
  x: -xVal * speedX,
  y: yVal * speedY,
  z: zVal,
  rotationY: rotateDeg * 3,
});

Here is a fork of your codepen:

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

 

Finally I saw that you're loading the CSS Rule Plugin in your codepen. Any particular reason for that? We strongly recommend using CSS Variables now:

https://greensock.com/docs/v3/Plugins/CSSRulePlugin

 

Hopefully this helps.

Happy Tweening!

[Honiism]

7 hours ago, Rodrigo said:

Hi @Honiism and welcome to the GreenSock forums!

 

The problem is that GSAP is updating the transform property of the element on every tick, so when you do that manually here:

el.style.transform = `translateX(calc(-50% + ${-xVal * speedX}px))`
  + `rotateY(${rotateDeg}deg)`
  + `translateY(calc(-50% + ${yVal * speedY}px))`
  + `perspective(2300px) translateZ(${zVal}px)`;

 

GSAP just overrides that. Is better to let GSAP handle the whole thing:

gsap.set(el, {
  x: -xVal * speedX,
  y: yVal * speedY,
  z: zVal,
  rotationY: rotateDeg * 3,
});

 

Here is a fork of your codepen:

 

 

 

Finally I saw that you're loading the CSS Rule Plugin in your codepen. Any particular reason for that? We strongly recommend using CSS Variables now:

https://greensock.com/docs/v3/Plugins/CSSRulePlugin

 

Hopefully this helps.

Happy Tweening!

Hi! Thank you for your kind help. I've tried to transform my elements using gsap.set() but it doesn't seem to yield the same result as my manual transformation. I've attached 2 images below, 1 is what it's supposed to look like and 1 is how it actually looks like with gsap. Could you maybe please help me with how I can set these elements properly just like how I did manually? Thank you so so so much!

Note: the elements are set to fit a galaxy fold phone so please make sure the width of the codepen preview is around 380px!

Normal:

With GSAP:

[GreenSock]

Yeah, I noticed several problems: 

1. You've got CSS transitions applied to something you're also controlling with JavaScript on every tick - that's a very bad idea most of the time. It really hurts performance. Every time you set it in JS, the CSS transition is like "NOPE! I won't let that happen right now...I'll drag that out over time instead" (over and over and over again).
2. You're using a non-standard order of operation in your transforms. One of the benefits of GSAP is that it offers a consistent order of operation which is super helpful in the vast majority of cases. 
3. You're trying to directly set transforms on an element and also have GSAP set it. Your changes are overwriting GSAP's (and/or visa-versa). 
4. My personal opinion is that the code you're running there is pretty inefficient (costly). On every mousemove event, you're calling getComputedStyle(el).left multiple times for every parallax element and searching the classlist. I'd recommend streamlining that quite a bit. 
5. Just so you know, it's almost always much better to handle all your transform-related stuff through GSAP because it uses cached values and decomposes the matrix values once for efficiency. It's faster and more accurate. But in your case, if you truly need that odd order of operation, you're stuck handling that on your own or doing it in an onUpdate with a proxy.

If you really need that custom order of operation, here's a quick fork that allows you to use a proxy to animate the rotation and layer that on top of the other stuff you're doing: 

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

 

Good luck!

[Honiism]

.

[Honiism]

After messing around, I've finally solved it! I was trying to use calc() in the gsap because I wanted it to be added to -50%. Turms out I Just needed to add -50 to xPercent and yPercent and then use x, y, z as usual. That means I can finally set the spinning animation with gsap too, yay! Just one last issue, sometimes when I move my mouse over the screen the spinning animations flickers back and forth. I'm not really sure why this is happening, could someone maybe direct me as to why?

Here is the updated codepen

[GreenSock]

That's because you've still got CSS transitions applied which are totally messing with things. GSAP keeps setting rotation to new values on every tick, but CSS transitions PREVENT those changes for taking effect (it delays them). So they kinda build up. By the time GSAP crosses from 359 back to 0 (which would normally look perfectly smooth), CSS transitions may have the actual displayed rotation back at 254 (or whatever) so that then when GSAP sets it to 0, CSS transitions think you want to go from 254 BACKWARDS to 0 because again, CSS transitions are trying to do all the interpolation for you. 

 

This is part of the reason why I said you should never have CSS transitions applied to things that you're animating with JS. Make sense? 

 

You might want to consider using gsap.quickSetter() for a slight performance optimization. Of if you want things to gradually change, gsap.quickTo() could be useful. 

 

Good luck!

[Honiism]

12 hours ago, GreenSock said:

That's because you've still got CSS transitions applied which are totally messing with things. GSAP keeps setting rotation to new values on every tick, but CSS transitions PREVENT those changes for taking effect (it delays them). So they kinda build up. By the time GSAP crosses from 359 back to 0 (which would normally look perfectly smooth), CSS transitions may have the actual displayed rotation back at 254 (or whatever) so that then when GSAP sets it to 0, CSS transitions thing you want to go from 254 BACKWARDS to 0 because again, CSS transitions are trying to do all the interpolation for you. 

 

This is part of the reason why I said you should never have CSS transitions applied to things that you're animating with JS. Make sense? 

 

You might want to consider using gsap.quickSetter() for a slight performance optimization. Of if you want things to gradually change, gsap.quickTo() could be useful. 

 

Good luck!

Ohh, I'm so sorry. I didn't realize I had a transition to set a cubic-bezier in my scss file. Thank you so much for helping me with this. The issue is all solved and moving smoothly now!