Loading Transition with Javascript (GSAP Flip Animation)

In this tutorial, we will learn to create cool animations using JavaScript and the GSAP Flip plugin.
You can find the final code here:

0:00 Introduction
0:30 Figma Design
1:55 Markup
4:15 CSS
6:15 Animation Explanation
9:30 Coding Starts
15:00 Flip Setup
18:20 Set Initial States
22:22 Flip Explanation
25:38 Fade Up Images
27:10 onComplete Explanation
28:05 Scale Image
32:30 Reveal Content
39:30 Outro

[sushantdey]

Guys like you are very less on YouTube, Keep going 🙌🙌

[yahiaelid]

this is all i needed to understand GSAP as someone who only uses webflow ❤❤

[CXx]

I really love your work, please keep uploading more <3<3

[SoyIvan]

I was looking for a good place to learn Gsap and your channel is perfect, since it is how to put together interesting projects step by step, a really good channel, thank you

[Aman_yadav]

Content is top notch ...sir continue your work ...very interesting and inspiring 👍..alot new concepts about gsap I learn ..thank you

[pushpakjangela]

you are so underrated work is really awesome ❤

[feb]

Loving this content. Just React (or vanilla html/JS) and GSAP. Less is more they say.

[TaimoorShahzada]

randomly this video took my attention
it's dope brother <3

[axh]

Hello Daniel, please make more tuts like this.
If you can make a simple menu animation that opens and closes, entirely in react and gsap, that'd be great.

[shivudesign]

Wow someone is sharing such building creative website.. thanks brother for sharing such creative stuff looking forward to learn more from you.. bring end to end full website like building portfolio etc

[theMArio-kx]

Great Knowledge. Love your tutorials ❤

[adnanamin]

Super explanation with amazing steps breakdown! Although I'm not very good with the class based approach, still enjoyed and learned a lot! Thank you, Daniel

[johnedet]

Great Contents.. Pls can you try out more of this with react or next js

[Jishanthegodev]

Thank you so much for this amazing vid ❤

[htooaungglwinn]

Can you please explain your way of setting up project this way please? I've been learning about JS classes and modules but still struggle to understand your setup clearly. I really love this way of set up as it's so clean and systematic! Anyway! You are channel is golden!

[mdrifat]

Where you guys were when I tried to learn gsap? 😢😢 For not getting enough tutorial, I switched my plan to learn gsap to framer motion

[shivudesign]

Brother one more suggestion please start building from single code making markup too.. this will be beneficial for beginners thats why.... just by explanation of code wont understand but by typing it does.

[marcusfrancis]

ive noticed you often link timelimes to clean your code. Could you create a short tutorial on linking GSAP timelines / files and refferencing them?

[gangon]

If i wanted to make the user see this animation, before being able to scroll down to the rest of the page how should i do it ?
Thought maybe i should add the rest of the content to a container with display none, and set on animation Complete their display to block ?

[amanmool]

Are you working on any new projects / videos? love your videos