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

@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.

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

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?

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.