Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Federica

Smooth scroll to whole page and trigger animations

Recommended Posts

Hello everyone. 

What i'm trying to achieve is to have a smooth scroll effect applied to a .main div that wraps the whole page. 

The effect i reached is great but in the moment in which i add triggers inside, the position of them is wrong and seems affected by the smooth effect in a wrong way.

 

This is the code for the page smoothing part:

gsap.to(".container", {
      yPercent: -100,
      y: "100vh",
      scrollTrigger: {
        scrub: 1,
        trigger: ".container",
        start: "top top",
        end: document.querySelector(".container").clientHeight,
        markers: true
      }
    })

I set the yPercent as the -100% of the page and had to add also a y property to "100vh" in order to remove from the calculation the px height of the viewport that was in excess. 

The .container is a relative positioned element that wraps everything and is wrapper by a .main div that is positioned in fixed and with overflow hidden. 

This parts gives no problems. 

 

But, when i insert a simple trigger (which is in this case a relative positioned tag p inside the page), it places the trigger way down and while i scroll it moves too smoothly up or down. 

If the smooth code is removed, the trigger works perfectly, i have problems only when i match the trigger and the smooth. 

 

This is the code of the trigger

gsap.to(".bg", {
      duration: 0.5,
      autoAlpha: 0,
      scrollTrigger: {
        toggleActions: "play complete none reverse",
        trigger: ".trigger",
        start: "top top",
        markers: {startColor: "pink", endColor: "pink", fontSize: "12px"}
      }
    })

 

Thank you in advance for the help. 

 

Share this post


Link to post
Share on other sites

Hey Federica. Have you looking into the method of smooth scrolling using ScrollTrigger.scrollerProxy? I think the video and demos there will explain how to do smooth scrolling + ScrollTrigger.

  • Like 2

Share this post


Link to post
Share on other sites

Hi Federica, we went through GSAP only smooth scrolling in another forum thread.

 

Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling.

 

See the Pen PoZLpbp by ihatetomatoes (@ihatetomatoes) on CodePen

 

Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable.

 

Scroll responsibly :)

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites
3 hours ago, Ihatetomatoes said:

Hi Federica, we went through GSAP only smooth scrolling in another forum thread.

 

Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling.

 

 

 

 

Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable.

 

Scroll responsibly :)

Thanks much, smooth now!

 

 

Share this post


Link to post
Share on other sites

@Ihatetomatoes Thank you so much, it works like a charm! You rock!!!!   🤟

  • Like 2

Share this post


Link to post
Share on other sites

Great to hear that it was useful😀

Share this post


Link to post
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.

×