Choppy Shuffle Animation

[rocketman97]

Hi everyone, I'm trying to create a shuffle animation, the problem is the animation is really choppy and jagged and I don't really know what I can do to make it more smooth. please does any one have any suggestions. the main shuffle starts after the cards are introduced.  and the lines of code i have an issue with starts from // Apply animations 

i have also attached my codepen url.

 

See the Pen eYXrjWx by razorchoice (@razorchoice) on CodePen

[GreenSock]

Hi @rocketman97. That jumping is because you're calling shuffleList() a bunch of times in quick succession, and each time it's totally changing the position of the elements and starting to animate them. It looks like a logic issue in your code. I'm not really sure what you're trying to do though. I'd recommend greatly simplifying the issue. It shouldn't take 150+ lines of JavaScript to illustrate. 

 

It also look like you're using the VERY old syntax. I'd highly recommend updating to the modern syntax. There's no need to ever use TimelineMax, TimelineLite, TweenMax, or TweenLite. And the easing is much cleaner now too: 

// old
ease:Elastic.easeOut.config(0.9,0.1),
  
// new
ease: "elastic.out(0.9, 0.1)"

See https://gsap.com/resources/3-migration

[rocketman97]

46 minutes ago, GreenSock said:

Hi @rocketman97. That jumping is because you're calling shuffleList() a bunch of times in quick succession, and each time it's totally changing the position of the elements and starting to animate them. It looks like a logic issue in your code. I'm not really sure what you're trying to do though. I'd recommend greatly simplifying the issue. It shouldn't take 150+ lines of JavaScript to illustrate. 

 

It also look like you're using the VERY old syntax. I'd highly recommend updating to the modern syntax. There's no need to ever use TimelineMax, TimelineLite, TweenMax, or TweenLite. And the easing is much cleaner now too: 

// old
ease:Elastic.easeOut.config(0.9,0.1),
  
// new
ease: "elastic.out(0.9, 0.1)"

See https://gsap.com/resources/3-migration

So, i removed all the irrelevant code and left only those related to the shuffle animation.

[GreenSock]

Sorry, I don't understand what you're asking or what your goal is. Please be very specific about your GSAP-related question. 

[rocketman97]

5 minutes ago, GreenSock said:

Sorry, I don't understand what you're asking or what your goal is. Please be very specific about your GSAP-related question. 

Hi sorry for the confusion, i am using gsap to make my shuffle have a nice animation to it, problem is GSAP throws the cards in all direction, if you could give me a demo for a card related animtion using Gsap it will be helpful in getting the animaiton working smoothly

[mvaneijgen]

4 minutes ago, rocketman97 said:

problem is GSAP throws the cards in all direction

It's not really GSAP doing that. On line 28 you get all the children, that includes the button! If you remove the button from the parent it works better. I've also just called the shuffleList() in the button click but there is something off in your calculations that positions the elements. I don't have much time at the moment, but personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Hope it helps and happy tweening! 

 

See the Pen dyreqXz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[rocketman97]

24 minutes ago, mvaneijgen said:

It's not really GSAP doing that. On line 28 you get all the children, that includes the button! If you remove the button from the parent it works better. I've also just called the shuffleList() in the button click but there is something off in your calculations that positions the elements. I don't have much time at the moment, but personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Hope it helps and happy tweening! 

 

 

 

hi, thank you! i also noticed i made lots of mistakes. thanks for clearing it up