Question about working with gsap scrollTriger with different scroll in sections of the site

[Igor Cher]

Hello. I am currently creating a website that has several sections. At the same time, the scrolling on the initial sections is normal (from top to bottom), and on one of the sections I want to make a scroll that will be made as if inside the page (a kind of 3D effect).  Also, I have already written the code that will be responsible for such an animation.
Question: how to use "gsap scrollTriger" to start this animation when the site is scrolled to the desired section (with this animation), and also at the end of this section with the animation "deep into" the site to switch the scroll to the lower sections again to normal (from top to bottom)?
I would be very grateful if you could tell me how to implement this functionality

[Cassie]

Hi there Igor,

 

Here are some simple examples of adding ScrollTrigger to a tween and a timeline.

 

// Simple example

gsap.to(".box", {
  scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
  x: 500
});
// Advanced example

let tl = gsap.timeline({
    // yes, we can add it to an entire timeline!
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // pin the trigger element while active
      start: "top top", // when the top of the trigger hits the top of the viewport
      end: "+=500", // end after scrolling 500px beyond the start
      scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
      snap: {
        snapTo: "labels", // snap to the closest label in the timeline
        duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
        delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
        ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
      }
    }
  });

// add animations and labels to the timeline
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

Here are the docs too -

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

If you need more help could you give us a minimal demo to take a look at?

Thanks and hope this helps!