[Complex Demo: Align two tweens with timeline]

11 minutes ago, Carl said:

In the future please, try to explain the behavior you would like to see. "I want to make some animation happen at the same time" doesn't really tell us very much when its an app we've never seen with 100+ lines of code.

 

Perhaps something like: "when you hit the deal button I would like the existing cards to move out of the way as new ones come in". 

 

After some time looking at the code that was what I had to guess you wanted.

 

 

You were right twice: i was cryptic and that was the behaviour i wanted

 

Thanks a lot, you gave me a deeper insight on timelines.

 

I guess i do not even need to use a unique timeline instance, i can refactor it.

 

Regards!

[Complex Demo: Align two tweens with timeline]

Hi,

 

i'm building a demo for a card game and i got it working thanks to the amazing hints of the experts in this forum.

 

I think i developed the hardest pieces and now i want to play with the timeline to make some animation happen at the same time.

I already watched the good tuts and read the documentation about timelines but something goes wrong with this specific case.

 

Please have a look here

https://codesandbox.io/s/0v6p9z27n

 

In the animation.js file at line 103 you have the animation that is fired when you press DEAL.

 

The animation consists of 4 parts (line 113-116), if i put a label to the last two animation (to make them run at the same time) it stops working.

 

Can you please help me with this issue?

Thanks!

 

[Animating a card game in React with GSAP]

Oh yes!

 

I did it!

 

https://codesandbox.io/s/71on24wqwj

 

[Animating a card game in React with GSAP]

Hi,

 

the flip basic codepen has been very helpful: my demo is almost finished and is almost working with Grid from Semantic ui.

 

https://codesandbox.io/s/w7831r09kk

 

If you can take a look at it you will see:

 

1) At start 12 cards are in the deck (overlapped thanks to position: absolute)

2) When you press 'DEAL' 9 cards change dom parent (the green rectangle)

3) Soon after an animation starts and move the 9 cards to the new parent using FLIP and some math to make them fit in the green rect with some overlap

 

I'm pretty ahead so far but i'm missing a last bit: as you can see from the demo the cards do not start their animation from the deck because when they change dom parent they lose the 'position: absolute' attribute and the flex container spread them horizontally.

 

Do you have any advise on how i could modify the staggerTo (or the whole approach) to make it functioning?

Thanks a lot.

 

[Animating a card game in React with GSAP]

Wow, thanks again! (can i assume i always thank you when i reply? It's getting obvious )

You're giving me an accelerated course in DOM animations

I read tons of articles today (and as many codepens...), trying to figure out a lot of notions that were missing in my head.

I stopped to work on my demo because i was caught by a lot of subtle details you addressed (getBoundingClientRect sheganigans, flexbox/grid/semantic grid, and more) and now i'm pretty tired to continue.

Basically i agree that flexbox should do the job and i love the last codepen you've done.

I want to explore the semantic-ui grid possibilities tough, under the hood it's just a glorified flexbox system, and see where i can get.

 

Have a nice week end, see you next days with new exciting questions

 

 

[Animating a card game in React with GSAP]

I'm doing pretty much the same stuff but i have some problem because i use left and top property (%) and then something goes wrong.

 

I modified  the css .card, to display it in the center of a bigger deck, when you toggle back there is a mismatch, can you help me with this?

 

.

card {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }

 

See the Pen EEdMjM?editors=0110 by anon (@anon) on CodePen

 

[Animating a card game in React with GSAP]

Hey!

 

I greatly improved the demo, now it has a simple status and, i think, it performs the FLIP.

 

The important bits are in App.js at lines 55, when you click on the Deal button:

• the status changes
• then the DOM sync accordingly (this.forceUpdate)
• when the update is done dealAnimation is called to perform the animation fromTo

https://codesandbox.io/s/nwy30q5xw4

 

I have one issue tough: as you can see the animation starts and finishes at the 'wrong' spots, this has something to do with what you say here ?

I'm not able to fix it.

 

38 minutes ago, OSUblake said:

An important thing to remember is that there shouldn't be any inline styling that deals with position or size on your elements. Before calling getBoundingClientRect in that demo, I set the transform on each element to "none", otherwise the bounds might be incorrect. Later on, I add any transforms that were on the element into the invert calculations. A nice thing about GSAP is that the transform values are cached on the element. For example, to get the x and y translation value, you can do this.

 

var x = element._gsTransform.x;
var y = element._gsTransform.y;

 

 

side note: i use jquery to get the node references for the animation, this is not an issue for me now

 

[Animating a card game in React with GSAP]

Hey, i really appreciate the help here.

I investigated the flip pattern and it sounds promising. The react-flip-move repo links to a interesting article to explore some details of this topic, if you are interested.

 

Anyway, it looks like the reconciliation strategy is a viable one and i started to mock a streamlined codesandbox (sorry for not using codepen) but pretty similar to my real project and i'm starting to get my hands dirty with some tweening

In this example i use Grid from Semantic-UI to layout a Card and a Deck component.

They live in two different columns and i was trying to animate the Card moving on top of the Deck

 

I succeeded in doing that using getBoundingClientRect and i have few questions for you guys:

 

https://codesandbox.io/s/m9jn02vpp9

 

1) first of all, are you liking this approach? What do you think in general? Would you do something different?

2) am i using the tweens correctly?

3) is this approach 'responsive proof'?

 

[Animating a card game in React with GSAP]

Wow, thank you SO much.

 

I'll dig into these links and will report back!

 

Regards.

[Animating a card game in React with GSAP]

Hey, thanks for the reply.

 

I think i'm ok with the React stuff, my main problem is to understand how React and GSAP connect together at the end of the animation.

 

The example of the board game is almost perfect, we need some pieces to animate from a square to another, so let’s go with checkers for example:

 

• i think you’ll have a Board, Square and Piece components that display the status of the app when we need to render
• when you have a new update in the status (a piece moved from a cell to another cell) you start an animation (with gsap of course)
• this animation moves a div-Piece from a div-Square to another div-Square… but you did not change the DOM position of the Piece, you did just an animation (a translation indeed)
• this is my concern… do you need to reconciliate the div-Piece with the DOM? With this question i mean to remove the div-Piece from his parent and attach it to the new parent 

[Animating a card game in React with GSAP]

Hi folks,

 

i moved my first steps in the Green Sock world and i find it amazing

Thanks a lot for all the goodies.

 

I'm trying to develop a card game in react and i've read a lot of resources in the forum to know how match React+GSAP and i think i get it (in particular i love this) 

I don't really have a GSAP related question, it's more an abstract question on how to correctly implement the whole flow of my app because i'm getting stuck in the animation part.

I posted the question in stack overflow HERE but i would love to hear some impressions by the forum experts because typically they give wonderful hints

If you feel this post does not belong to this forum feel free to delete it, thanks anyway.