Javascript Layout Animations REALLY SIMPLE TUTORIAL!

Check out my courses to become a PRO! 🔥
developedbyed....
In todays episode we will learn how to create javascript layout animations with GSAP and their flip plugin. From my experience with React and framer motion...I really prefer the simplicity on how gsap achieves and let's you control these animations.
If you are interested in adding simple yet impressive javascript animations, you need to give this one a go.
🛴 Follow me on:
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#programming #javascript

[@developedbyed]

Thumbs up if you love GSAP! Definitely one of my favourite ones 🔥🔥

[@SamaRevanthReddy-v7h]

please share the source code

[@RILCOMusic]

Ed, youve been just the best over the last couple years man. Not to be weird but your smile and optimism has been a real spirit lifter for me personally on my coding journey. I remember you had a rough patch a year or so ago and I remember thinking "man I hope Eds still enjoying this". And since then youve done SO much for the community, and you just took it on by yourself and I just wanted to say thanks and give you big credit for that. Now I'll watch this video.

[@xyntho]

I love the way Ed enjoys explaining interesting things to us!

[@outpost31737]

Your humour and personality make learning so much more enjoyable. NEVER lose your sense of humour Ed :)

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@Private_C123]

Awesome tutorial mate 👍🏼 One quick Q; I'd like to start with the active-box already showing, and then you can click/rotate/do the cool stuff. In this way you can add 5 cards on rotation. That should not be too hard to accomplish is it? Keep up the great tuts!

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@vaahxx.]

you should have more than 1 million subscribers, thanks!

[@HammerofSigmar5]

Thank you so much! I've been looking for this for 2 weeks

[@johnmason4264]

Always here with the good stuff!

[@a.anvarbekov]

10secs before I got a youtube notification of this video I'd been googling "what is the best js animation library"

[@PSProduktions]

Dude that was awesome! Thanks for showing this to us!

[@green_views]

I enrolled your React and redux course. It's amazing 🤩. Especially magic cards lessons 😆

[@Trazynn]

I'd like to be able to make a random image slide show from an images folder with a fade transition continuously showing another random image from the folder. So far all codepens, jsfiddles and youtube tutorials fall short in this. It would be such a powerful element to add to any website, one that can continuously be built further on.

[@OliverKelso]

It would be a little difficult to pull off, without some back end code supplying the list of image files in the directory. I don't think I would want my front end JS reading a directory on my server anyway. Without the back end code, you could just create an array of the images that exist in the folder, and then have your JavaScript pull a random index from that array. The fade transition is easy.

[@maherylala2153]

4:48 that "b****" outta nowhere lol

[@sanim8or]

even i felt it was something personal holding him back.🤣

[@MikaelTheJoker]

What theme and file icons are you using? Great tutorial!! 🔥🔥

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@xenialxerous2441]

Hey dude! Great work once again 👏 Got some new ideas looking at the layout and animation. Keep up the good work 🎉🥂

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@stevonduddly5709]

Great tutorial! - is there anyway to remove the click event listener to the active class so that users can click on links inside the paragraph? i've tried to create a funtion to remove the click event, I get no errors in the code, but the event listener doesn't stop. - Any help would be greatful - Thanks.

[@soulforthekindheart3766]

this will look great i my portfolio for class

[@SumitRai87]

Nice tutorial, would like to point out that instead of adding event listener to every link, its better to use event delegation on the Navbar

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@rachidben-azouz793]

Good job ! Thanks Ed👍

[@landrafter]

Great stuff, thanks so much!

[@paulthomas1052]

Excellent tutorial as usual. Thanks :)

[@ssk7690]

Hi, I need a doubt to be cleared please reply... in the first animation, append.child is making the clicked link active. But we're not removing the previously active link's div. Is this handled by JS internally?

[@professionalshahbaz8655]

Another Masterpiece

[@tk.laurii]

can you upload the code on github? for the lazy ones ;) please do more videos like this!!

[@EnigmaCHIPS.]

Hi Ed, i followed the video and got the same results, but when i tried to add an actual page to the other nav links, the animation stops working and the active nav is refreshed. I don't even know if you understand the question. Any help is appreciated. Thank you!

[@ezequielstom6745]

thks for the visual magic!

[@tifamedia1918]

When I Reload/Refresh the Browser the "active-nav-bar" moves back to home and does not stay on the current page. Can you help me on this one?

[@kumaravelanbu1017]

More videos on gsap please

[@thesethguy]

Is there a way to make those boxes react with a parallax effect if your looking at them from a supported device tilting in any direction?

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@MiroslavClausky]

Up

[@ssk7690]

Hi, can we do this with dataset, just adding an attribute to the nav-links without actually creating a div i.e., 'the line'

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@ElizabethTeresa-um3hb]

does this works on mobile devices??

[@hassaneoutouaya]

Thank you so much!

[@RIO-uo7uu]

how can i use Flip with react

[@kohelet910]

Really cool :)

[@funlandhq]

Already using it. 👍

[@funlandhq]

Thank you so much!

[@sjorsroelofs]

Crazy good

[@micemincer]

Nice vid but you need a white balance ;)

[@coffeymay6775]

4:43 - 4:49 lololol

[@SamaRevanthReddy-v7h]

Hi can you please share the source code

[@deafdogdesign]

As usual my result is not according to the recipe, my nav links all change color together😪

[@ARMAN-et2if]

wow 🫡🫡🫡🫡🫡🫡🫡

[@jeevanjose3347]

🥳🥳🥳🥳

[@LucasGomes-ng5ug]

You could sell your courses in Brazilian money, doing me a favor!

[@VoloInTech]

Hi✋✋✋

[@kobi-kobsen]

So this makes me stick to jquery ✌️

[@mahiabdullah8880]

We husband and wife from Bangladesh do code together...Learning a lot from your videos...Even my email profile picture Inspired from your github account...Sir one day I would like to send our portfolio to you and and we are highly interested to work with you as a remote/freelance developer. Is it possible Sir?

[@Gaius_Julius_Caesar_Augustus]

Second

[@nickwoodward819]

First