AllBitsEqual

Ok, I made a really basic (and ugly) pen to demonstrate one of the things I need to solve. https://codepen.io/AllBitsEqual/pen/jOvpwEa?editors=0011 I've added one group for the simple movements and another for the complex ones. In the real app, those would all be part of the same set of movement results. I've kept them apart here to keep it a bit more readable. I've also NOT implemented spawning new tiles so the current mock isn't realistic as the empty areas would fill up from the top in the real game. Also right now in the mock, the IDs are something along the lines of t-x-y such as t-0-4 and so on... in the real app, each tile has a generated uid and more data. I've tried to keep things simple. The basics are in the codePen. I need to write some code to properly calculate the timings and delays and relative x/y values for each step (right now I did it by hand / in my head and hardcoded it) and both the durations, ease options and a lot of other things need a ton of fine-tuning but basically, it works... it's just not really pretty. I'll now take another look at the flip plugin. Just wanted to quickly drop the codePen demo here before doing more research.

A simple version could be a pre-populated grid with empty tiles, pre-calculated paths and a play button... I think I can do that in the future and both use as an example and for trying out different approaches. Maybe I did not understand the purpose and capabilities of flip and I'll give it another go and get more familiar with the concept and examples. Also thanks for the link to carl's content. Guess I'll add it to my watch list for the weekend.

First of all, thanks for the response. I had a quick look at flip and while it looks like a cool and useful plugin, I think it only has a small overlap with the stuff I'm planning to do. I also had a look at the linked pens by OSUblake and there are quite a few nice things in there too. Again, thank you for the search results but from what I could see by skipping through those videos, they mostly did not do complex stuff for the animations and are basically where I already am. I've got a working game with most of the basic stuff a player can do, win/lose handling, spawning and moving of new tiles/gems and all that, even chain reactions and combos for special effects. What I currently do is "staggering" animations by "knowing" the duration of previous animations and adding a computed delay to later animations in the timeline. Right now I want to introduce prettier eased animations and other effects in a timely manner and clean way that keeps the project manageable and scalable.

Hi everyone I'm currently looking at GSAP as a potential tool for animating moving tiles on a grid after solving this in basic javascript a while back. I've made a few animated banners and simple things using GSAP and I'm pretty happy with the results but right now, I'm not sure if GSAP timelines might be able to help me solve something a bit more complex. I've built a simple match3 game in javascript and it was working all pretty ok but I was never able to achieve smooth animations and propper easing. With my newfound experience with GSAP, I'm currently thinking about taking up an old pet project of mine again and trying to redo the whole animations of the game board with GSAP. The issue I'm currently facing is that in match3 games (Candy Crush and the like) you have a lot of tiles in a grid moving at the same time, starting and stopping their movements to then move again when an opening was created. I've done the whole calculation of where which tile will be at which time and I can use those results to derive paths (3 down, 1 down left diagonally and then 2 more down and so on) and I know how to write the tl.to() code to move a singular tile. Right now I'm looking at the best way to write multiple of these timelines and run them in parallel. My regular JS code will take care of player interactions, turns, effects (falling tiles creating a new match, removing matched tiles and all that. What I really would love to know is either if someone has a link to a useful tutorial or can give me a few key words that might help me do my own research to see how I best solve this challenge.