Jump to content
Search Community

Adding Jquery Animation to Timeline

Avargas test
Moderator Tag

Recommended Posts

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

  

Screen Shot 2020-08-24 at 4.02.44 PM.png

Screen Shot 2020-08-24 at 4.02.53 PM.png

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

Link to comment
Share on other sites

Or, since we already added that

 

clicker.addEventListener("click", resumeTL);

 

in the onComplete of that second tween in your timeline, you could simply just exchange the functionality of that function being called via that eventListener with the function that makes your image explode - and of course delete any unwanted tweens that come after that in your timeline.

 

  • Like 5
Link to comment
Share on other sites

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

Link to comment
Share on other sites

I am not familiar with the capabilities of jQuery's explode method nor what you actually need for your project. The core concept is render multiple pieces of the picture, which is pretty straightforward. Here are some related threads on these forums:

I'm sure there's also examples on StackOverflow and CodePen.

 

Similar but probably different, I actually created a little library to break down DOM elements into particles if that interests you.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...