Jump to content
Search Community

chaowen

Members
  • Posts

    2
  • Joined

  • Last visited

chaowen's Achievements

  1. 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!
  2. 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.
×
×
  • Create New...