rashonwill Posted March 13, 2021 Share Posted March 13, 2021 Can this be achieved through gsap? I want to have a shuffle animation for grid items. See Code Pen. See the Pen ZEBxEJd by williamsrashon (@williamsrashon) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 13, 2021 Share Posted March 13, 2021 Hey rashonwill and welcome to the GreenSock forums. The Flip Plugin is perfect for this sort of thing! Here it is applied to this situation: See the Pen KKNJYZM?editors=0010 by GreenSock (@GreenSock) on CodePen 5 Link to comment Share on other sites More sharing options...
rashonwill Posted April 9, 2021 Author Share Posted April 9, 2021 Thank you. I have a follow up to this. How can I make this repeat multiple times. I know there is a repeat property, but it only repeats the one original motion however many times I set the repeat to. I sort of want the plugin to do the flip the first time, "Get that state" and make another flip, based on the new state, sort of looping through the plug in as many times as I declare. I'm working on a 3card monte game, see code pen. I would like to just click the button once and have it apply the plugin animations 4 different times. See the Pen OJbOEzQ?editors=0010 by williamsrashon (@williamsrashon) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Hey rashonwill. ☺️ Repeat should do the job! Can you add a minimal demo so we can help you figure this out? Link to comment Share on other sites More sharing options...
rashonwill Posted April 9, 2021 Author Share Posted April 9, 2021 I've made a cleaner version. See the Pen QWdaWyK by williamsrashon (@williamsrashon) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Apologies. I just realised you're using the flip plugin, not a timeline, so repeat won't be what you're after. By minimal demo I meant a codepen reduced down to just include the part you're needing assistance with. There's quite a lot going on in this codepen so it's a little hard to understand what you're trying to achieve. 1 Link to comment Share on other sites More sharing options...
rashonwill Posted April 9, 2021 Author Share Posted April 9, 2021 Sure, I've added a new codepen above, that's cleaner. See the Pen QWdaWyK by williamsrashon (@williamsrashon) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Great! Thanks. So you'll want to call that function again once the flip tween is finished. Here's a little example using onComplete to call the function again - it keeps track of the loop number and loops until it hits the number of shuffles specified. See the Pen 01d970532e2ef3b54ae4b88c9f613c8d?editors=1010 by cassie-codes (@cassie-codes) on CodePen 4 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 9, 2021 Share Posted April 9, 2021 Hi, This code seems to do what you're after: $('.shuffle').click(function () { // event.preventDefault(); $('.card').addClass('active'); $('.bet').css('pointer-events', 'none'); $('.grid .card').css('pointer-events', 'auto'); }); const grid = document.querySelector(".grid"); const items = gsap.utils.toArray(".rg_item"); let repeatCount = 0; const repeatLimit = 3; const Animate = function() { if (repeatCount === repeatLimit) return repeatCount = 0; repeatCount += 1; // Get the state const state = Flip.getState(items); // Do the actual shuffling for(let i = items.length; i >= 0; i--) { grid.appendChild(grid.children[Math.random() * i | 0]); } // Animate the change Flip.from(state, { absolute: true, delay: .2, duration: .4, onComplete: Animate }); }; document.querySelector(".shuffle").addEventListener("click", Animate); Also @GreenSock and @OSUblake, can a flip instance be placed inside a timeline? It would be nice for a scenario like this. Just create a method that returns a Flip instance and it's added to a timeline. Happy Tweening!!! Mhhh.... seems like @Cassie was faster than me!!! 4 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 I WIN ✨ Adding a flip instance to a timeline sounds great though. full disclosure - This is actually my first look at the flip plugin, it looks really powerful. Can't wait to have a bit more of an experiment with it. 1 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 9, 2021 Share Posted April 9, 2021 4 minutes ago, Cassie said: I WIN ✨ I can't keep up with your speed coding !!! 3 Link to comment Share on other sites More sharing options...
rashonwill Posted April 9, 2021 Author Share Posted April 9, 2021 Thank you guys, I will look at both solutions! Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 reassuringly, they're exactly the same. 😂 *high five* 1 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 9, 2021 Share Posted April 9, 2021 @Cassie Seems like our requests were listened !!! A Flip instance is in fact a GSAP timeline, so yeah, it can be added to another timeline. Happy Flipping!!! 3 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Coooool Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 5 hours ago, Rodrigo said: Also @GreenSock and @OSUblake, can a flip instance be placed inside a timeline? Which part? FLIP.from() returns a timeline, so you should be able to add that a timeline. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 4 hours ago, Rodrigo said: A Flip instance is in fact a GSAP timeline, so yeah, it can be added to another timeline. Doh, I didn't read down far enough. 2 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Still just as good to know the second time round. 🙌 1 3 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