Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Avargas

Adding Jquery Animation to Timeline

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
1 hour ago, akapowl said:

Or, since we already added that

Haha. Good call. I gotta start looking at the demos before answering. ;)

  • Haha 1

Share this post


Link to post
Share on other sites

You might also end up needing to do from tweens back to the boxes original state, as whatever explode does to your element it might not respect the inline styles gsap added.

  • Like 2

Share this post


Link to post
Share on other sites

@PointC

I simply just remembered that pen from answering a question in an older thread 😋

Also, it never hurts nobody to take a deeper look into the docs, just as you sugggested :) 

  • Like 2

Share this post


Link to post
Share on other sites

Yuck, jQuery animations 😛

 

I'd create (or find) a GSAP animation that does the same sort of thing as what you're wanting. It'll perform better and that way you don't have to load all of jQuery.

  • Haha 2

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
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.

×