[Speed of GSAP animation on mobile]

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

}

[Adding Jquery Animation to Timeline]

@ZachSaucier would you know of anyway this could be replicated through GSAP. I tried to look through the forum but came up empty handed. Again the animation just renders an image onto canvas and breaks the image down to several pieces. 

[Adding Jquery Animation to Timeline]

Hello, I'm having trouble adding a jQuery animation to my gsap timeline. I want to replace my last to. tween to my jquery animation. The animation breaks my canvas into small pixels with a small plugin called imgExplode.js. I wasn't able to find a cdn for it to attach to my javascript in codepen.  I added some screenshots of how the animation looks. the jQuery code looks like this. I know it will be a little more difficult since I couldn't attach to the codepen but any help would be appreciated. Thank you. 

$(document).ready(function(){
$(".container").click(function(){
    $(".image").explode({"minWidth":3,"maxWidth":10,"radius":235,"minRadius":0,"release":false,"fadeTime":300,"recycle":false,"recycleDelay":500,"explodeTime":1000,"round":false,"minAngle":0,"maxAngle":360,"gravity":1,"groundDistance":236});
});
});

  

See the Pen RwapbWq by avar1207 (@avar1207) on CodePen

[Animation after click]

The examples that I noticed have been done with a button as mentioned by @Richard1604 @ZachSaucierIs it possible to do this with a click of the actual element?

[Animation after click]

Hello, I am new to GSAP and had a question. I made a timeline that I posted above. I wanted the timeline to stop after the second tween then after a click of the elements have the two remaining tweens occur. I was wondering if this was possible on the same timeline or would I have to create another one? Thank you. 

See the Pen yLOYqjX by avar1207 (@avar1207) on CodePen