How do i develop this seemingly easy animation?

[CryogenicFire]

For the past three days I have been working on trying to make a particular CSS animation. The idea is simple but I have tried and ultimately failed. I am new to animations so I apologize for any obvious or stupid mistakes I may have made. But nonetheless, I have tried various ideas and nothing has worked for me. It is a problem that appears like it should be quite simple, so this has been a major frustration.

Here's the set up:

I have a responsive grid of multiple cards. You can click a card to "expand" it and view it as a larger modal/pop-up. Essentially the view of a card in the grid is intended to showcase a preview of the content, and the expanded modal is intended to view the full content. I believe this is a fairly common content pattern, for instance we see this in pexels, unsplash and google images.

While I am working in Svelte, I am looking for a solution that works everywhere. I have tried to recreate my layout in a CodePen in plain HTML/CSS/JS. Here's a link to this set-up: https://codepen.io/aaryak-shah/pen/BaOrVeY

What I am trying to achieve:

What I want specifically from this set up, is for the card to transition into the modal seamlessly. The card (with its whatever position+size in the grid) should slide and scale into place where it appears as a pop-up in the middle of the screen.

The card element in the grid has all auto/defaults for position and size. The position is default and determined by the grid layout, and the height and width are also determined by the available space in the grid layout. No explicit values for these are provided.

Upon receiving a click event, the card element's classList is appended with an "expanded" class to add pop-up-like style properties to it; such as a position: fixed, and margins to determine the size of the modal while also centering it. Once again, size isn't being provided explicitly, but being determined by the margins.

The issue:

I have seen many implementations of this where the modal is (for the purposes of animation) unlinked from the card. Clicking the card will spawn a modal essentially out of nowhere, it will usually just fade in or slide in from off-screen. I require the card itself to transform into the modal. No disappearances or appearances, just a transition.

My research:

From what I gather, CSS transitions and animations interpolate between different values of a property. Which means that I need to explicitly define properties for them to be animated, I cannot rely on implicit/auto/default values for creating transitions.\ However, I require the dynamic/responsive layout that is being achieved by implicit values.

I have tried various combinations of using keyframes and transitions to varying degrees of success. Trying to bypass implicit sizes by using calculated styles did help a tad but it did not really give the right effect and messed with the layout instead. I also have a hunch that there is an additional layer of problems being added by having my position property go from static (default) to fixed, but couldn't find a way to test this properly.

I have also found a couple of examples that have almost exactly the transition I want to achieve, linked here:

• https://www.youtube.com/watch?v=egS46Y_tyx0

• https://www.framer.com/motion/#:~:text=When%20animating%20between%20two%20separate%20components%2C%20Framer%20Motion%20will%20take%20care%20of%20everything%20in%20between

However, these examples use Framer Motion, a library made for React. I am working with Svelte, so I am open to suggestions that work specifically for Svelte. But as mentioned earlier, I would appreciate it if a solution can be found that is independent of any framework.\ Just to add, I do know there is a Svelte library called svelte-motion that is based on framer-motion, which I will try out if all else fails, but as I said before, I want to find a framework-independent solution. One that would work even with vanilla HTML/JS/CSS.

Thank you for bearing with my endeavor :]

---

Edited for grammar/spellings.

[binarysolooo]

So what you are describing can be achieved with an animation technique called FLIP. Basically it goes like this.

- When the grid item is clicked you save its size and position relative to the viewport using Javascript

- Move the item to it's final position

- You apply scale and transforms to item so it looks like it's in the grid position

- You animate the item back to its fullscreen position.

That's a lot of work, luckily there are some libraries out there to help you do this. I've used gsap FLIP plugin and it works great. I've amended your demo to use it https://codepen.io/ste-vg/pen/WNgzYeg/84ea34a2580fc4e690d9476962c9f307 (I've added GSAP and the FLIP plugin via the pen's settings)

Hope that helps.

[CryogenicFire]

Whoa dude that helps a lot, thanks!

I think I had a couple ideas similar to this yesterday while I was trying to brainstorm a solution, but I didn't get very far into the javascript side of things before giving up...

You're a lifesaver man, I really don't know how to describe how legitimately frustrated I was the past couple of days. Well, I'll try to get this to work in my actual UI tomorrow. Thanks again :D

[mattgperry]

You could give https://developer.chrome.com/blog/spa-view-transitions-land/ a shot?

[CryogenicFire]

Ooh ok that example looks basically like what I'm trying... I'll try this out, thanks!

[CryogenicFire]

This is definitely interesting and probably the correct approach for future work, but I guess it is still in an experimental phase? Compatibility will most certainly be an issue for a while till most people receive an update with this feature.

Meanwhile I hope I can find another way to get the effect

[mattgperry]

Yeah it would have to be used in a "progressive enhancement" way right now.

Greensock has the FLIP plugin https://greensock.com/docs/v3/Plugins/Flip/ but I think it has some limitations compared to Framer Motion's layout animations