Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest markussali

Dealer Cards animate to players

Recommended Posts

Hi there,

 

I did one example on codepen to show scenario im right now, i want the cards[array] on stagger to be showed on close on each Player (like in this image )

 

Screen_Shot_2015_12_15_at_10_08_24_PM.pn

 

 

 

 and not in middle as it is in example right now, can anyone give me idea how can i archive this effect,fork codepen demo would be great.

See the Pen addyZN by anon (@anon) on CodePen

Link to post
Share on other sites

Hi markussali :)

 

pls check .staggerTo() method Doc. ;

 

Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }})

  • Like 2
Link to post
Share on other sites

Hi Diaco,

i'm tryin to archive clockwise effect,for example 2cards for player at a time , i have no idea right now how can i archive this effect

Link to post
Share on other sites

i'm having a very difficult time understanding what you need. 

Do you want us to help you calculate how to position each card relative to each player?

 

You have 7 players and 4 cards. I don't understand where the cards should be or where they are going to or coming from.

 

I think it would really help if you simplified the demo to just have a few elements and very precise instructions on how they should animated.

  • Like 4
Link to post
Share on other sites

Hi Carl,

 

Yes excacly, i need help to calculate position of each player and how to position each card relative to each player.

 

For example take a look in codepen i edited :

See the Pen XXdmEO by anon (@anon) on CodePen

 , now lets say we have 8 players and 16cards , 2cards for each players, i need a way to position 2 cards relative to each player, with the same effect i did with stagger.

 

Thanks for your replay.

Link to post
Share on other sites

Hello markussali,

 

Since you are using a staggerTo() tween you can take advantage of the cycle property. This should get you close:

 

See the Pen BjKjWV by jonathan (@jonathan) on CodePen


 

This is just a proof of concept so you can see it is possible. I am just cycling through 7 different values in the array and then it it is repeated, after the 7th. You could make it an array of 14 different values with the last 7 having an offset for overlap of the 2 cards. Or add some type of random offset for overlap the way you want.

TweenMax.staggerTo('.player-card', 1, {
  rotation: 360,
  y: 190,
  cycle:{
    x:[200,200,200,-20,-250,-250,-250],
    y:[-30,85,200,185,200,85,-30]
  }
}, 0.5);

You can adjust the values to your needs to provide overlap (with offset) of the cards when dealt by the dealer

 

A nice video tut by GreenSock on how to use cycle with staggger:

 

 

Taken from TweenMax Docs:

  • Cycle through multiple values
    Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended).
  • The cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() methods in TweenMax, TimelineLite and TimelineMax.
  • When using function-based values the function will be passed an argument which represents the index of the current tween. Inside the function body, the scope (this) refers to the target of the current tween (see source of first demo above).
  • the cycle property is available in GSAP 1.18.0+

TweenMax staggerTo() Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

 

:)

  • Like 4
Link to post
Share on other sites

Hi Jonathan,

 

Thanks for the idea, this si what i needed :) , now just i have one problem because i dont want the value on cycle {x,y} to be hardcoded, how can i get position of for each player dynamically .

 

 

thanks a lot

Link to post
Share on other sites

You can take a look at this other GreenSock page on that stagger cycle feature:

 

http://greensock.com/gsap-1-18-0

 

Also these codepens by GreenSock that pass in a function to produce dynamic values, since cycle can accept an array or function based values

 

See the Pen KdKjqe by GreenSock (@GreenSock) on CodePen

See the Pen 37648d9ee90c9e24ae0c16222b2b346c by GreenSock (@GreenSock) on CodePen

 

:)

Link to post
Share on other sites

Great demo and advice, Jonathan!

 

Markusali, please understand that we have to keep our supported very focused on the GSAP API. 

Since you are setting the positions of all your player's with top and left you should look into using jQuery's position() method to grab those values

https://api.jquery.com/position/ and populate your arrays.

  • Like 1
Link to post
Share on other sites

Hi Carl,

 

I understand but im just tryin to learn and i dont know where can i get help!

 

I tried using jquery position to get position of each player but somehow is getting the wrong position i dont know what i'm doing wrong :? 

 

this is codepen using jquery positin 

See the Pen yeOVMJ by anon (@anon) on CodePen

  

Link to post
Share on other sites

First off, you have too many players and cards. But there's a bigger issue going on here. JQuery's position method and getBoundingClientRect return the absolute position of an element. You need to find an elements relative position in relation to something else. JQuery's offset method can sometimes help, but you're also using percentage based transforms with left/top. It's a nice way to center things, but you have to keep in my mind that it's relative starting position of 0 will now be in the center. If you don't account for this, all your positioning will be off.

 

Here you go, I even added in an offset to the players stack of cards.

 

See the Pen gPrWaZ by osublake (@osublake) on CodePen

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

×