rotateY not working in Nuxt

[chaowen]

Hello there,

 

I am fairly new here and would greatly appreciate any help with this issue.

I came across this amazing carousel and tried to implement it in my Nuxt project.

( Sample provided in the end )

 

 

The same code works on my CodePen but not in my Nuxt project.

Here is the code from my CodePen :

See the Pen GRzrYqB?editors=0011 by chaowen (@chaowen) on CodePen

 

 

I also replicated the code in CodeSandbox, which you can find here :

https://codesandbox.io/p/sandbox/test-3d-carousel-gsap-26jqsl?file=%2Fpages%2Findex.vue%3A20%2C9

 

 

Upon investigation, I realized that the code is not functioning as expected in Nuxt.

rotateY: (i) => i * -36

 

Full code here :

  let xPos = 0

  gsap
    .timeline()
    .set('.ring', { rotationY: 180, cursor: 'grab' }) //set initial rotationY so the parallax jump happens off screen
    .set('.img', {
      // apply transform rotations to each image
      rotateY: (i) => i * -36,  // !!HERE!! this NOT wokring
      transformOrigin: '50% 50% 500px',
      z: -500,
      backgroundImage: (i) =>
        'url(https://picsum.photos/id/' + (i + 32) + '/600/400/)',
      backgroundPosition: (i) => getBgPos(i),
      backfaceVisibility: 'hidden',
    })

 

Any suggestions to resolve this issue? Your help would be greatly appreciated.

Thanks a lot.

See the Pen mdROBXx?editors=0010 by creativeocean (@creativeocean) on CodePen

[Tasty]

Hey there @chaowen I'm not sure what should be the effect here but maybe you should try with rotationY instead of rotateY
I was struggling with that once, I kept writing rotate instead of rotation ^_^' 
Though I'm not completely sure this solves your issue

It changed something when I pushed it to -100  

See the Pen LYqWzmz by tastysites (@tastysites) on CodePen

Have a great one 

[Rodrigo]

Hi,

 

There might something at play here that I can't really confirm right now. The codepen you're linking is using version 3.6.1 and we're on 3.12.2, so that's a lot of water under the bridge. We'll check and report back.

 

In the mean time using immediateRender: false in the from() instance seems to solve this:

gsap
  .timeline()
  .set('.ring', { rotationY: 180, cursor: 'grab' }) //set initial rotationY so the parallax jump happens off screen
  .set('.img', {
  // apply transform rotations to each image
  rotateY: (i) => i * -36,
  transformOrigin: '50% 50% 500px',
  z: -500,
  backgroundImage: (i) =>
  'url(https://picsum.photos/id/' + (i + 32) + '/600/400/)',
  backgroundPosition: (i) => getBgPos(i),
  backfaceVisibility: 'hidden',
})
  .from('.img', {
  duration: 1.5,
  y: 200,
  opacity: 0,
  stagger: 0.1,
  ease: 'expo',
  immediateRender: false,
})

Hopefully this helps.

Happy Tweening!

[chaowen]

Thank you guys for the reply!
Yes, after adding immediateRender: false, it works perfectly. Also, thank you for pointing out that I am using a different version. I will look into that as well.
That really save my day.
Thanks again!

 

[GreenSock]

Ah, this was helpful in identifying a regression that was causing this behavior. It should be resolved in the next update which you can preview here: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

(you may need to clear your cache). 

 

It'd only affect things with a 3D transform-origin and also are in a from()/fromTo() tween without immediateRender: false. 

Sorry about any confusion there!