casie150 Posted August 23, 2021 Share Posted August 23, 2021 gsap.registerPlugin(ScrollTrigger); ScrollTrigger.config({ limitCallbacks: true }); const whyItems = gsap.utils.toArray('.why_list_item'); whyItems.forEach(whyItem => { gsap.from(whyItem, { y: 80, duration: 0.5, delay: 0.5, opacity: 0, scrollTrigger: { trigger: whyItem, } }) }); const upAnis = gsap.utils.toArray('.up_ani'); upAnis.forEach(upAni => { gsap.from(upAni, { y: 80, opacity: 0, duration: 1.0, scrollTrigger: { trigger: upAni, } }) }); const wipes = gsap.utils.toArray('.wipe '); wipes.forEach(wipe => { const timeWipe = gsap.timeline({ scrollTrigger: { trigger: wipe, } }); timeWipe.to($(wipe).find('.wipe_overlay'), { width: "100%", duration: 0.8, ease: Power2.easeInOut, transformOrigin: "left", }) timeWipe.to($(wipe).find('.wipe_img'), { autoAlpha: 1, duration: 0, delay: -0.1, }) timeWipe.to($(wipe).find('.wipe_overlay'), { width: "0%", duration: 0.8, transformOrigin: "right", ease: Power1.easeInOut, right: "0", }) }); Hi Everyone, My code isn't always firing completly, sometimes there is a big delay or it doesn't finish all the animations. Please view my website and refresh and scroll a couple of times to generate the problem. www.1314media.nl Hope someone can help me! Thanks in advance. Cas Bukkems Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2021 Share Posted August 23, 2021 Hey there Cas - It's hard to debug GSAP code in isolation as the issues can be related to your HTML, CSS and other JS. Could you possibly create a minimal demo on codepen or codesandbox so we can help you debug? Thanks! 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