Javascript Layout Animations REALLY SIMPLE TUTORIAL!
ฝัง
- เผยแพร่เมื่อ 16 พ.ย. 2022
- 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 - วิทยาศาสตร์และเทคโนโลยี
Thumbs up if you love GSAP! Definitely one of my favourite ones 🔥🔥
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.
I love the way Ed enjoys explaining interesting things to us!
Thank you so much! I've been looking for this for 2 weeks
Dude that was awesome! Thanks for showing this to us!
10secs before I got a youtube notification of this video I'd been googling "what is the best js animation library"
Always here with the good stuff!
Excellent tutorial as usual. Thanks :)
I enrolled your React and redux course. It's amazing 🤩. Especially magic cards lessons 😆
Good job ! Thanks Ed👍
Great stuff, thanks so much!
Hey dude! Great work once again 👏 Got some new ideas looking at the layout and animation. Keep up the good work 🎉🥂
🌟DM for help/support👆
Your humour and personality make learning so much more enjoyable. NEVER lose your sense of humour Ed :)
Questions can come in⬆️⬆️...
thks for the visual magic!
Thank you so much!
you should have more than 1 million subscribers, thanks!
Another Masterpiece
4:48 that "b****" outta nowhere lol
even i felt it was something personal holding him back.🤣
Really cool :)
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!
Questions can come in⬆️⬆️...
this will look great i my portfolio for class
Crazy good
What theme and file icons are you using? Great tutorial!! 🔥🔥
🌟DM for help/support👆
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?
Already using it. 👍
Thank you so much!
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.
can you upload the code on github? for the lazy ones ;)
please do more videos like this!!
More videos on gsap please
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.
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.
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
Questions can come in⬆️⬆️...
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!
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?
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?
Questions can come in⬆️⬆️...
Up
Hi, can we do this with dataset, just adding an attribute to the nav-links without actually creating a div i.e., 'the line'
🌟DM for help/support👆
4:43 - 4:49 lololol
does this works on mobile devices??
how can i use Flip with react
Nice vid but you need a white balance ;)
wow 🫡🫡🫡🫡🫡🫡🫡
As usual my result is not according to the recipe, my nav links all change color together😪
🥳🥳🥳🥳
You could sell your courses in Brazilian money, doing me a favor!
Hi✋✋✋
Second
First
So this makes me stick to jquery ✌️
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?