Jump to content
GreenSock

Sygol

Don't fire animation on page load, just on scroll with ScrollTrigger

Recommended Posts

Hi guys,

 

I am using ScrollTrigger to animate different elements on my page. I wrote this function to make it happen:

export function animateDomElement(domElement, animationOptions){
    if (domElement != undefined){
        domElement.timeline = gsap.gsap.timeline({
            scrollTrigger:{
                trigger: domElement,
                start: "center 100%",
                toggleActions: "restart none none reverse",
            }
        })
        domElement.timeline.from(domElement, animationOptions)
    }
}

$(window).load(function(){
    var elements = $('.element');
       elements.each(function(idx, element){
       		animateDomElement(element, {duration: .3, opacity: .4, y: 15});
    });
})

But then it looks kind of weird when I first wait for for example images to load and then animation is performed. Is there a way around it? So animation doesn't trigger when I load the page, but only when I scroll?

 

Thanks!

Link to comment
Share on other sites

Hey Sygol. I assume you mean that the elements that are already in view when the page loads fire when the page loads? Keeping only those paused until the scroll is an interesting effect that I haven't thought of doing before.

 

You can set that up by keeping track of which animations should have played (and pausing them) and play them once the scroll has occurred: 

See the Pen GRoWLJK?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
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.
×