Jump to content
Search Community

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

Igor Cher test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .from(".box", {backgroundColor: "#28a92b"})
  .to(".box", {rotation: 360})

Here are the docs too -


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

Thanks and hope this helps!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...