Giggioz

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!

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!

Oh yes! I did it! https://codesandbox.io/s/71on24wqwj

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.

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

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%); }

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. side note: i use jquery to get the node references for the animation, this is not an issue for me now

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'?

Wow, thank you SO much. I'll dig into these links and will report back! Regards.

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

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.