onthegocode

Hello, I am working on a wordpress website and incorporated Gsap to create a nice animation but all of a sudden the Gsap animation doesn't work until the user clicks on the screen. This seems to be for both Mobile and Desktop. I was wondering why this may be happening and how I can fix the issue. Website: lisapalmer.me ] My JS Code: let tl = gsap.timeline({ defaults: { ease: "sine.ease" } }), current = window.location.pathname, mediaQuery = window.matchMedia("(max-width: 921px)"); mediaQuery.matches ? tl .from(".text", { duration: 1, y: -150, delay: 0.25, stagger: 0.1 }) .fromTo( ".astra-logo-svg", { duration: 1, opacity: 0 }, { duration: 1, delay: 0.8, opacity: 1 }, "<" ) .from("#heading_wave", { duration: 1.5, opacity: 0 }, "<.6") .to(".header-hide", { duration: 1, opacity: 1, stagger: 0.2 }, "<") : "/" == current ? tl .from(".text", { duration: 1, y: -150, delay: 0.25, stagger: 0.1 }) .fromTo( ".menu-link", { y: 25 }, { duration: 1, y: 0, opacity: 1, stagger: 0.2 } ) .fromTo( ".astra-logo-svg", { duration: 1, opacity: 0 }, { duration: 1, delay: 0.8, opacity: 1 }, "<" ) .from("#heading_wave", { duration: 1.5, opacity: 0 }, "<.6") .to(".header-hide", { duration: 1, opacity: 1, stagger: 0.2 }, "<") : tl .to(".menu-link", { duration: 1, y: 0, opacity: 1, stagger: 0.2 }) .fromTo( ".astra-logo-svg", { duration: 1, opacity: 0 }, { duration: 1, opacity: 1 }, "<.9" ); Thanks, Andrew Rivera

Thank you so much you have been very helpful! ?

Hello Cassie, Thank you for your kind words. I had no clue Chrome was bascially the same as Safari, good to know. I did have a feeling clip paths could be the culprit. Thank you for your alternative options I will be trying them out shortly ?. Quick question I am familiar with masks but not so much with using SVG clip paths, how would they work? Also by animating the clipped elements, do you mean moving the element itself rather than the clip path? Thank you, Andrew Rivera

Hello, I am new to Gsap and have been having some fun creating animations. I created an animation that primarily uses clip paths and everything looks perfect on Desktop ("Chrome browser"). The issue occurs when on mobile. I am using a iPhone XR running Chrome Browser also tested on Safari and the animation starts looking Janky. The frames are dropping and svg just pops into view when it should appear with a nice animation. I have linked a codepen of the project, please let me know if my code isn't optimized and what I can do to help make my animations work on mobile devices. Best, Andrew Rivera