nickelman

@mikel I tried a bit, but still not satisified around the easing or timing... ? https://codepen.io/clieee/pen/YRaXWj

@mikel okay, thanks will try out a bit myself then. If anyone has any ideas, feel free to let me know ?

@mikel ah, now we are getting somewhere, sweet! So, the one you refer to as "right" is the one I'm curious about. As you can see in my reference it is not moving in a sequence like "do animation, finish", "do next animation, finish", instead it is doing more like "do animation, and then after a short time start another animation with other properties..."? You see what I mean? More things happens at the same time in my reference... hm.

@mikel Okay - I think we need to start over here, a bit of misunderstanding now on this whole question. Basically what I'm asking is only the transition that happens to the box where the plus sign is in. That box is growing first downwards, and some positioning on the y-axis, then it is starting to grow on the x-axis, etc.. So my question is basically how to do that combination because it all is not happening in the order of: 1. ScaleY downwards, and move X px downwards 2. then ScaleX 3. then scaleY up and down etc..

@mikel I did not mean to be rude. The reason why I dont have a CodePen for it is simply because I don't know to how approach the animation. Your example is a bit too far away from what my reference is. If you look at the box that is expanding when the user is clicking on the PLUS sign box, what is happening there?

@mikel thanks. However, this is not really what I'm looking for. I'm totally familiar with the sequence of doing what you have posted, but as you can see in my reference there is more than that, it is more of a sequence of properties being tweened at the same time combined with sequence, which is really what I find hard to accomplish.

@elegantseagulls sorry I dont have a codepen for it, but basically I tried with timeline with different tweens for different props without no real success :) i would very much appreciate if you would be able with an example.

Hi, I found a part of a transition I wonder how to achieve. Please look at the link below. I'm talking about the transition when the user clicks on the "PLUS"-sign where that scales, moves and transitions to the big black container. I've been trying with scale, transformOrigin, y, x, etc but cant seem to figure out the way to go to? Any ideas? https://dribbble.com/shots/3124285-Personal-Site-JS-Interactions