Speed of GSAP animation on mobile

[Avargas]

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');

}

[GreenSock]

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!