Impossible FLIP Layout Animations With Svelte And GSAP

[@JoyofCodeDev]

🔴 Patreon: www.patreon.com/joyofcode 💬 Discord: joyofcode.xyz/invite

[@RishuKumar-zo2hc]

Please do a project course on latest svelte kit. Like Netflix you showed.. i want to learn it. You are the best person i can think of who can teach svelte

[@JoyofCodeDev]

I would love to do a course in the future.

[@RenCode]

you channel is slowly becoming my favorite channel on youtube 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥

[@AlexR_418]

Thank you! 🙌🏻 This is great!😃

[@ilmanmanarulqori5632]

More guides for svelte and gsap 🎉🎉🎉🎉🎉❤

[@svelterust]

Didn't know this was possible with Svelte 😄

[@JoyofCodeDev]

You can do it with any framework in theory.

[@RodrigoDAgostino]

FLIPping fantastic guides, man! Thank you so much for putting them together! Can’t wait to give this a try :)

[@TheJackTheLion]

My absolute new favorite channel. You are hilarious.

[@AlphaKanalBiH]

What a great technique, thanks for sharing

[@arnabiscoding]

Nice explanation friend.

[@cholasimmons]

Man I was just looking for something like this last week @1:10, like Flutters hero animations

[@FCcommando]

could you make a video about scrolltriger animation with gsap?

[@JoyofCodeDev]

I haven't used it but I might consider it.

[@thedelanyo]

The requestAnimationFrame was very simple, but await tick() was such simpler 😅😅

[@JoyofCodeDev]

I kind of prefer not having to make the function async and using an import but `tick()` is intended to be used for this.

[@karemdlvk4116]

Like what some of the comments, very few people actually show coding projects. I think it would extremly good if you do a video about making some simple projects with some tailwind css and Sveltekit. Thanks!

[@JoyofCodeDev]

I would love to do more projects.

[@svelterust]

That's a good idea, we need more project based videos for Svelte 😄

[@mrbjjackson]

I'm kind of annoyed by the timing of this video tbh. I just started a new project and I'm wondering whether to do it in Sveltekit or Next. I thought I had decided Next because there's no easy way to do Framer Motion-style transitions in Sveltekit. And now you show me this and I'm not so sure any more! 😫 Love your videos 😊

[@JoyofCodeDev]

You can do a lot only using the built-in Svelte transitions. If you want to do more advanced layout animations then you can reach for the FLIP animation technique. If you're not sure if Svelte can replace Framer Motion I have an entire video on animating Svelte in the description.

[@QuintenCoret]

The example you show is actually not impossible in plain CSS, with the new View Transition API. That requires three lines of JS instead of the hundreds of KB brought by GSAP.

[@JoyofCodeDev]

The View Transitions API is only available in Chrome at the moment and doesn't replace FLIP which I mentioned and another downside is that it doesn't work great with existing SvelteKit page navigation functions but I have a demo using the new `onNavigate` function: twitter.com/joyofcodedev/status/1645874370970091520.

[@twd2]

Awoseme, and I really liked your (TABLE OF CONTENTS) menu in your website, is it a plugin component !!!

[@JoyofCodeDev]

Thank you! I just made it and it's very simple. I query the existing table of contents HTML from the post and place it into the sidebar with a sprinkle of Svelte transitions and the Intersection Observer API. The code is open source: github.com/mattcroat/joy-of-code.

[@twd2]

Thanks,Bro !!!

[@TomHermans]

Another great explanation. Just want to ask what it is what (app?) you use in the beginning to draw/move/explain what FLIP is.

[@JoyofCodeDev]

excalidraw.com/

[@ystijl]

Great tutorial but I have a question. If the list of movies is any longer, clicking a thumbnail after scrolling down, results in a jerky animation. The reason is that the animation starts from the element's absolute page position so the animation starts below the window and we only see the last few frames and the effect is completely lost. You can see this in your own example if you shrink the window and click a thumbnail below the fold. Is there a way to start the animation from the element's position relative to the viewport (ie. getBroundingClientRectangle) so that the animation looks visually correct?

[@ystijl]

I ended up doing it in beforeNavigate: 1. get the origin element's client position with getBoundingRectangle() 2. clone the node 3. append it to the body, 4. position the clone absolutely with recalculated coordinates ( original element's bounds + scrollY ) 5. capture the clone in FlipState 6. delete the clone 7. pass the FlipState to afterNavigate. It's hairy, especially when animating multiple elements. But at least now the animation starts at the visually correct location on the destination page. I wish there was a way to override the flipstate object right inside the gsap methods.

[@fredbcruz]

I hit a wall with keyed blocks animation. I wanted to do a transition between different pages but keeping the header in place so i used url.pathname as key for the main layout slot. But later I tried to make a portfolio sub-layout with dinamic routes for each job and couldn't figure a way to have the inner layout animate but not the outer one.

[@fredbcruz]

I mean, is gsap the answer?

[@JoyofCodeDev]

You can use GSAP but in the future you should use the View Transitions API. It doesn't work great in SvelteKit at the moment but there's a proposed `onNavigate` navigation function. I'm going to make a video on using the View Transitions API in SvelteKit when it's ready.

[@Johnny_JTH]

Sveltekit has a flip animation built-in...

[@JoyofCodeDev]

You can only use it inside keyed each blocks and you can't animate layouts which is a fraction of the power compared to using the real FLIP animation technique.

[@edhahaz]

How does svelte animations compare to framer motion (react framework) ?

[@JoyofCodeDev]

Svelte animations do most of what you need. I haven't used Framer Motion a lot but the same person also made Motion One using the Web Animations API if you want to use something similar.

[@--Arthur]

"Impossible FLIP"? It's quite literally 1 line of CSS and 1 line of JavaScript using the View Transitions API. As seen in this Svelte REPL with the id `9b80f19927c8427eb7bde75b63dac86a`

[@JoyofCodeDev]

It's not supported in every browser.

[@iceman1982one]

You are imposible , how you writing a code . I saw svelte for beginers man . Masakra