Jump to content
Search Community

Grid Items Random Shuffle

rashonwill test
Moderator Tag

Recommended Posts

  • 4 weeks later...

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

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.
 

  • Like 1
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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!!! :D:D:D

  • Like 4
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...