Javascript Layout Animations REALLY SIMPLE TUTORIAL!

Подписаться 927 тыс.

Просмотров 75 тыс.

50% 1

Check out my courses to become a PRO! 🔥
developedbyed.com/
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/developedbyed/
#programming #javascript

Наука

Опубликовано:

16 ноя 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 58

@developedbyed Год назад

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

@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!

@HammerofSigmar5 Год назад

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

@PSProduktions Год назад

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

@a.anvarbekov Год назад

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

@johnmason4264 Год назад

Always here with the good stuff!

@paulthomas1052 Год назад

Excellent tutorial as usual. Thanks :)

@green_views Год назад

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

@rachidben-azouz793 Год назад

Good job ! Thanks Ed👍

@landrafter Год назад

Great stuff, thanks so much!

@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👆

@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⬆️⬆️...

@ezequielstom6745 Год назад

thks for the visual magic!

@hassaneoutouaya Год назад

Thank you so much!

@vaahxx. Год назад

you should have more than 1 million subscribers, thanks!

@professionalshahbaz8655 Год назад

Another Masterpiece

@maherylala2153 Год назад

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

@sanimator58 Год назад

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

@kohelet910 Год назад

Really cool :)

@CoenCommijs Год назад

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⬆️⬆️...

@soulforthekindheart3766 Год назад

this will look great i my portfolio for class

@sjorsroelofs Год назад

Crazy good

@MikaelTheJoker Год назад

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

@Joshdevbox_my_Teleqram_id Год назад

🌟DM for help/support👆

@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?

@funlandhq Год назад

Already using it. 👍

@funlandhq Год назад

Thank you so much!

@stevonduddly5709 10 месяцев назад

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.

@tk.laurii Год назад

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

@kumaravelanbu1017 Год назад

More videos on gsap please

@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.

@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⬆️⬆️...

@EnigmaCHIPS. 9 месяцев назад

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!

@tifamedia1918 10 месяцев назад

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?

@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 Год назад

@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👆

@coffeymay6775 Год назад

4:43 - 4:49 lololol

@ElizabethTeresa-um3hb 8 месяцев назад

does this works on mobile devices??

@RIO-uo7uu Год назад

how can i use Flip with react

@micemincer Год назад

Nice vid but you need a white balance ;)

@ARMAN-et2if Год назад

wow 🫡🫡🫡🫡🫡🫡🫡

@deafdogdesign Год назад

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

@jeevanjose3347 Год назад

🥳🥳🥳🥳

@LucasGomes-ng5ug Год назад

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

@VolodymyrInTech Год назад

Hi✋✋✋

@Gaius_Julius_Caesar_Augustus Год назад

Second

@nickwoodward819 Год назад

First

@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?