Sygol Posted June 22, 2020 Share Posted June 22, 2020 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 More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now