Avargas Posted August 24, 2020 Share Posted August 24, 2020 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 Link to comment Share on other sites More sharing options...
PointC Posted August 24, 2020 Share Posted August 24, 2020 I'm not sure I follow the question, but it sounds like you want to add a function to your timeline. In that function you can have the jQuery explode animation. You could do that with call() or add(). https://greensock.com/docs/v3/GSAP/Timeline/call() https://greensock.com/docs/v3/GSAP/Timeline/add() 2 Link to comment Share on other sites More sharing options...
akapowl Posted August 24, 2020 Share Posted August 24, 2020 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. 5 Link to comment Share on other sites More sharing options...
PointC Posted August 25, 2020 Share Posted August 25, 2020 1 hour ago, akapowl said: Or, since we already added that Haha. Good call. I gotta start looking at the demos before answering. 1 Link to comment Share on other sites More sharing options...
Visual-Q Posted August 25, 2020 Share Posted August 25, 2020 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. 2 Link to comment Share on other sites More sharing options...
akapowl Posted August 25, 2020 Share Posted August 25, 2020 @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 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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. 2 Link to comment Share on other sites More sharing options...
Avargas Posted August 25, 2020 Author Share Posted August 25, 2020 @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 More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now