Javascript Layout Animations REALLY SIMPLE TUTORIAL!

  Рет қаралды 78,095

developedbyed

developedbyed

Күн бұрын

Пікірлер: 60
@developedbyed
@developedbyed 2 жыл бұрын
Thumbs up if you love GSAP! Definitely one of my favourite ones 🔥🔥
@SamaRevanthReddy-v7h
@SamaRevanthReddy-v7h 5 ай бұрын
please share the source code
@RILCOMusic
@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
@xyntho 2 жыл бұрын
I love the way Ed enjoys explaining interesting things to us!
@outpost31737
@outpost31737 2 жыл бұрын
Your humour and personality make learning so much more enjoyable. NEVER lose your sense of humour Ed :)
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id 2 жыл бұрын
Questions can come in⬆️⬆️...
@a.anvarbekov
@a.anvarbekov 2 жыл бұрын
10secs before I got a youtube notification of this video I'd been googling "what is the best js animation library"
@HammerofSigmar5
@HammerofSigmar5 2 жыл бұрын
Thank you so much! I've been looking for this for 2 weeks
@johnmason4264
@johnmason4264 2 жыл бұрын
Always here with the good stuff!
@vaahxx.
@vaahxx. Жыл бұрын
you should have more than 1 million subscribers, thanks!
@green_views
@green_views 2 жыл бұрын
I enrolled your React and redux course. It's amazing 🤩. Especially magic cards lessons 😆
@PSProduktions
@PSProduktions 2 жыл бұрын
Dude that was awesome! Thanks for showing this to us!
@Private_C123
@Private_C123 2 жыл бұрын
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
@Joshdevbox_my_Teleqram_id 2 жыл бұрын
Questions can come in⬆️⬆️...
@maherylala2153
@maherylala2153 2 жыл бұрын
4:48 that "b****" outta nowhere lol
@sanim8or
@sanim8or Жыл бұрын
even i felt it was something personal holding him back.🤣
@rachidben-azouz793
@rachidben-azouz793 Жыл бұрын
Good job ! Thanks Ed👍
@xenialxerous2441
@xenialxerous2441 2 жыл бұрын
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
@Joshdevbox_my_Teleqram_id 2 жыл бұрын
🌟DM for help/support👆
@ezequielstom6745
@ezequielstom6745 Жыл бұрын
thks for the visual magic!
@stevonduddly5709
@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.
@Trazynn
@Trazynn 2 жыл бұрын
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
@OliverKelso 2 жыл бұрын
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.
@landrafter
@landrafter 2 жыл бұрын
Great stuff, thanks so much!
@paulthomas1052
@paulthomas1052 2 жыл бұрын
Excellent tutorial as usual. Thanks :)
@ssk7690
@ssk7690 2 жыл бұрын
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
@professionalshahbaz8655 2 жыл бұрын
Another Masterpiece
@MikaelTheJoker
@MikaelTheJoker 2 жыл бұрын
What theme and file icons are you using? Great tutorial!! 🔥🔥
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id 2 жыл бұрын
🌟DM for help/support👆
@soulforthekindheart3766
@soulforthekindheart3766 Жыл бұрын
this will look great i my portfolio for class
@EnigmaCHIPS.
@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!
@tifamedia1918
@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?
@thesethguy
@thesethguy 2 жыл бұрын
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
@Joshdevbox_my_Teleqram_id 2 жыл бұрын
Questions can come in⬆️⬆️...
@MiroslavClausky
@MiroslavClausky Жыл бұрын
Up
@ssk7690
@ssk7690 2 жыл бұрын
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
@Joshdevbox_my_Teleqram_id 2 жыл бұрын
🌟DM for help/support👆
@hassaneoutouaya
@hassaneoutouaya Жыл бұрын
Thank you so much!
@tk.laurii
@tk.laurii 2 жыл бұрын
can you upload the code on github? for the lazy ones ;) please do more videos like this!!
@SumitRai87
@SumitRai87 2 жыл бұрын
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
@Joshdevbox_my_Teleqram_id 2 жыл бұрын
Questions can come in⬆️⬆️...
@coffeymay6775
@coffeymay6775 Жыл бұрын
4:43 - 4:49 lololol
@kohelet910
@kohelet910 2 жыл бұрын
Really cool :)
@funlandhq
@funlandhq 2 жыл бұрын
Already using it. 👍
@funlandhq
@funlandhq 2 жыл бұрын
Thank you so much!
@kumaravelanbu1017
@kumaravelanbu1017 2 жыл бұрын
More videos on gsap please
@RIO-uo7uu
@RIO-uo7uu Жыл бұрын
how can i use Flip with react
@sjorsroelofs
@sjorsroelofs 2 жыл бұрын
Crazy good
@ElizabethTeresa-um3hb
@ElizabethTeresa-um3hb Жыл бұрын
does this works on mobile devices??
@micemincer
@micemincer 2 жыл бұрын
Nice vid but you need a white balance ;)
@SamaRevanthReddy-v7h
@SamaRevanthReddy-v7h 5 ай бұрын
Hi can you please share the source code
@deafdogdesign
@deafdogdesign 2 жыл бұрын
As usual my result is not according to the recipe, my nav links all change color together😪
@jeevanjose3347
@jeevanjose3347 2 жыл бұрын
🥳🥳🥳🥳
@ARMAN-et2if
@ARMAN-et2if 2 жыл бұрын
wow 🫡🫡🫡🫡🫡🫡🫡
@LucasGomes-ng5ug
@LucasGomes-ng5ug Жыл бұрын
You could sell your courses in Brazilian money, doing me a favor!
@VoloInTech
@VoloInTech 2 жыл бұрын
Hi✋✋✋
@Gaius_Julius_Caesar_Augustus
@Gaius_Julius_Caesar_Augustus 2 жыл бұрын
Second
@nickwoodward819
@nickwoodward819 2 жыл бұрын
First
@kobi-kobsen
@kobi-kobsen 2 жыл бұрын
So this makes me stick to jquery ✌️
@mahiabdullah8880
@mahiabdullah8880 2 жыл бұрын
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?
Make Awesome SVG Animations with CSS // 7 Useful Techniques
12:20
Гениальное изобретение из обычного стаканчика!
00:31
Лютая физика | Олимпиадная физика
Рет қаралды 4,8 МЛН
Enceinte et en Bazard: Les Chroniques du Nettoyage ! 🚽✨
00:21
Two More French
Рет қаралды 42 МЛН
Top 10 Javascript One Liners YOU MUST KNOW!
14:16
developedbyed
Рет қаралды 197 М.
Awesome 3D ANIMATION Javascript Tutorial!
35:11
developedbyed
Рет қаралды 684 М.
I finally switched from VSCode To Neovim
34:14
developedbyed
Рет қаралды 70 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 987 М.
How To Create PRO 3D WEBSITES Tutorial From Scratch
54:55
developedbyed
Рет қаралды 135 М.
HTMX + GO 15 Minute Quickstart (For Javascript Devs)
16:59
developedbyed
Рет қаралды 29 М.
5 Tips and Tricks To Make Your Life With Next js 14 Easier
17:11
developedbyed
Рет қаралды 44 М.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,9 МЛН
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,7 МЛН