Avargas Posted September 24, 2020 Share Posted September 24, 2020 Hello I'm having some trouble with my gsap animation and how it runs on mobile. For the most part it runs fine but when it gets to the tween that scales my ball element it looks very choppy and cuts off to my home page. Since it doesn't look like a huge timeline I don't see what might be the problem. Here is my timeline to see if anyone could have some ideas that would help. var hasPlayed = sessionStorage.getItem("hasMyAnimationPlayed"); if (!hasPlayed) { let logo = document.querySelector('.logo'); logo.style.opacity = '1'; let header = document.getElementById('header'); // hide header if (header) { header.classList.add('hidden') } let clicker = document.getElementById('clicker'); var ballMotion = gsap.timeline(); // GSAP Animation TimeLine ballMotion .from(".logo", { duration: 3, bottom: '-170vh', ease: "power2.inOut" }) .from(".ball", { duration: 3, bottom: '-167vh', ease: "power2.inOut", onComplete: function () { clicker.addEventListener("click", resumeTL); console.log('complete bounce out') } }, "-=3") .to('.flex-button', { duration: 1, opacity: 1, onComplete: function () { let button = document.querySelector('.flex-button'); button.classList.add('flex-button-finished'); } }) .to('#user_form', { duration: 1, opacity: 1 }, "-=1") .addPause() .to('.flex-button', { duration: 0.1, opacity: 0, zIndex: -100 },) .to('#user_form', { duration: 0.1, opacity: 0, zIndex: -99 },) .to('.ball', { duration: 1, borderRadius: '50%', transform: 'scale(175)', ease: "circ.inOut", onComplete: function () { // unhide header when animation is done if (header) { header.classList.remove('hidden') } loadWrapper.classList.add('load-wrapper-finished'); container.classList.add('hidden') } }, "-=0") ; // function for Explosion function resumeTL() { clicker.removeEventListener("click", resumeTL); $(".logo").explode({ "minWidth": 3, "maxWidth": 10, "radius": 600, "minRadius": 10, "release": true, "fadeTime": 10, "recycle": false, "recycleDelay": 500, "explodeTime": 1000, "round": false, "minAngle": 0, "maxAngle": 360, "gravity": 2, "groundDistance": 1500 }); ballMotion.resume(); sessionStorage.setItem("hasMyAnimationPlayed", true); } } else { container.classList.add('hidden'); } Link to comment Share on other sites More sharing options...
GreenSock Posted September 25, 2020 Share Posted September 25, 2020 It's pretty tough to diagnose blind, but performance issues like this are almost always completely unrelated to GSAP. I'd say that roughly 99% of the load on the browser is graphics rendering, not JavaScript code execution (GSAP). I'm also not sure what that $().explode() is, but that looks suspicious to me. If it uses jQuery animation, that's definitely rather slow (GSAP is up to 20x faster, but again, it's very likely not related to JS execution). Minor note: scale: 175 is definitely faster for GSAP than transform: 'scale(175)'. I'd strongly recommend using the transform component aliases like x, y, scale, rotation, etc. rather than the "transform" property which must get parsed every time. If you still need help, please post a minimal demo that shows the issue in context so we can see what's going on. Happy tweening! 2 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