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 :
https://codepen.io/chaowen/pen/GRzrYqB?editors=0011
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.