Don't fire animation on page load, just on scroll with ScrollTrigger
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.f
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
