3D Scroll

Lesson 9

Cards are arranged in 3D space using transform: translateZ() values on a transform-style: preserve-3d container. ScrollTrigger scrubs the container’s rotateX or camera Z to navigate between cards. perspective on the outer viewport element controls the depth illusion strength.

Source Code script.js

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.card-3d').forEach((card) => {
  gsap.to(card, {
    opacity: 1,
    rotateY: 0,
    duration: 0.8,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: card,
      start: 'top 85%',
    },
  });
});