as you are playing with web animations can you give us a proper roadmap like how should one can start learning animations, in raw js or react or nextjs sc etc. if you are reading this comment , please make a roadmap for javascript animation how one can start and master it just like you. .....
That’s basically web animations since the beginning of time. Stuff that require loading massive amounts of data and prevent customization, scroll jacking, intrusive sounds, things that break on resize, poor accessibility… the list goes on, up to actively hurting people with vestibular issues (I don’t have it but even I felt dizzy with some of those). Thing is: it’s flashy, clients love it and, if it works on their machine, you’re good. There’s a market for it and good money to be had.
I would not count igloo's web site as 'web animation', the fact that it is exported to play in the browser does not make it so, its produced in Unity and exported with draco, it requires totally different skill set and cannot be made by a web developer, instead its usually the other way around - non-web devs use tools to export their work for the web. It's unfair to even put it in the same category, especially reading the comments bellow, ppl asking for roadmap to master 'web animations'.. it's not GOD level, its just a specialized tool for 3d games.
Intermediate? Sure for gods like you😉 BTW amazing video like always.❤ I hope I can find amazing content for learning web animation so I can finally get what you mean.😇
from user experience point of view I consider Parallel page transition the coolest trick. also, every transition trick should license your swoosh-swoosh sound you do with your mouth xd
This might be a silly question, but aside from god-tier effects, can all the other effects be achieved with Webflow? I'm currently using Framer for my website, but it's quite limited, so I'm gradually learning Webflow. Thank you for your helpful video!
1. wont using framer motions exit animations for components (could be a page) make parallel transitions easy? Like in a sense you make 1 page go out and other come in. 2. I had to do infinite slider where I had multiple instances of them on the page, scrolling odd number scrolls even numbered ones into opposite direction, i found that a huge pain in the ass as if you do not scroll them they are supposed to move on their own in slow pace, and dealing with touch devices was even worse :D
What you call "Parallel page transition" looks a lot like the "View transitions API" that works everywhere but Firefox and is very easy to implement, no need to hijack scroll.
Use aria-hidden="true" to hide individual letters from screen readers, and use a visually hidden element that is readable by the reader using a class like sr-only or aria-label. That's how I would approach towards an a11y solution. Fact of the matter is, most of these website rarely care about being a11y compliant.
oh man I really wantedto do the depixelization image effect but I can't figure it out haha do you have a resource I could look at or something to type in google?
great video!. Could you make a tutorial of pixel image effect?. I'm struggling yet with that concept and I would like to know how the image is built in canvas :).
I thinkk 3D chrono is made with blender.. then you use 3d JS, it's the same concept as the little car that you can drive over the resume (website) it's relatively easy if you know blender
Hey bro one question i also wanna learn these kind of modern web animations , it looks really cool , i know web development , but dont know anything of animation on web , can you tell me how can i start to explore this field , some tips , resources , pitfalls.. you have pls provide
Hey people, I am a multimedia student and this is my first time getting to knowing about web development. Too me, I'm finding it hard to understand why a client would pay for web animation? What is the motive behind adding so much complexity
Well, I guess depends on the client. In my experience, only one client requested a website with text gradients, text and image fade, and page transitions. By way the way, he is going make a difference in the market.
client mostly would not need complex animations, if you really watch the video before commenting, those are mostly webdev agency page, so it's a skill shows.
12:01 Kids, remember nobody gives a sh*t about desktop web design. 80% of first impression web visits happen on mobile. Even in B2B, because everyone reads email on their phone.
They look nice but most of these animations suck on mobile or are basically useless on mobile where most users will interact with the website. they have bad user experience, accessibility and SEO. They also require heavy processing power from your PC or mobile.
Waiting for the course❤
It's so useful to establish some sort of standard naming convention for all these effects, thanks a lot (as always)
Beginner
26:02 Stairs Transition
22:17 Pixel Transition
29:30 Text Scramble
Junior
1:41 Masks
35:52 Text Gradient
0:35 Mask Split Text
24:20 Image Gallery with Mouse
Intermediate
4:59 Stacked Cards
15:27 Image Pixel Effect
17:10 Infinite Scroll
8:49 2D Physics
Avanced
33:47 Goey effect
10:18 Video on Scroll
18:23 Parallel Page Transitions
3:12 Pixel Shader
31:06 WebGL Gallery
6:55 3D DOM Positioning
33:01 3D Physics
20:50 Gradients
12:21 3D Perspective Gallery
God Tier
13:36 3D Timelines
26:57 Fluid Shader
Great video, as always. And those balloons at 11:35 lmao.
yeaa 😆
not sure what happened there haha
@@olivierlarose1 apple's reactions, triggered when u did ✌🏻, they have other effects when u do thumbs down/up and heart symbol with your hands
as you are playing with web animations can you give us a proper roadmap like how should one can start learning animations, in raw js or react or nextjs sc etc. if you are reading this comment , please make a roadmap for javascript animation how one can start and master it just like you. .....
Noted!
@@olivierlarose1 thank you
Great idea 🎉
And please share resources as well
This is such a great idea ! I would love a roadmap for animations
NOICE video!! Can't wait to see some of the Advanced or God tier animation tutorials.
i dont really often leave comments but this video ngl is AWESOME. never saw this before
Looks like I just found my 2025 animation to-do list- thanks again, Oliver!
I can tell by the look on your face that you love doing this kind of stuff, and you're really good at it!
This is quality content. Thank you!
Great work as always!
Hey, bro! You don't know how much your video helped me for a beginner like me. Hope to see more videos from you!
Thanks for sharing these amazing websites and your vision!
Great video Olivier ❤🙏🏻
goated individual, goated content 👩🍳
Awesome review Olivier. Now my new year 2025 resolution is to master God tier! 💪🏻😎
Great video!
Learned a lot. Thanks man ❤❤
Glad I discovered your channel 😄
Here's another comment to support the animations course! 🙏🏻
thank you for your content!
Surprised to still see so much work invested in effects that almost don’t translate to touchscreens.
That’s basically web animations since the beginning of time. Stuff that require loading massive amounts of data and prevent customization, scroll jacking, intrusive sounds, things that break on resize, poor accessibility… the list goes on, up to actively hurting people with vestibular issues (I don’t have it but even I felt dizzy with some of those).
Thing is: it’s flashy, clients love it and, if it works on their machine, you’re good. There’s a market for it and good money to be had.
Could you share your roadmap? i am passionate about web development pls :)
Noted!
34:10 for the 3d one id say its more likely to be raymarching with that lighting but other than that guassian blur
really nice video
Awesome content
Great one !!! Thanks
and Please make a video about custom shaders and gradients
can you please tell me a website for all this JS libraries , where i can find these libraries with their use cases ,
I would not count igloo's web site as 'web animation', the fact that it is exported to play in the browser does not make it so, its produced in Unity and exported with draco, it requires totally different skill set and cannot be made by a web developer, instead its usually the other way around - non-web devs use tools to export their work for the web. It's unfair to even put it in the same category, especially reading the comments bellow, ppl asking for roadmap to master 'web animations'.. it's not GOD level, its just a specialized tool for 3d games.
Intermediate? Sure for gods like you😉
BTW amazing video like always.❤
I hope I can find amazing content for learning web animation so I can finally get what you mean.😇
from user experience point of view I consider Parallel page transition the coolest trick. also, every transition trick should license your swoosh-swoosh sound you do with your mouth xd
What kind of technology do you think is used to implement this 3D timeline? theatre.js??
where did you learning these. if someone knows kindly share
Hi Olivier, when are you planning to launch your web animation course? Can't wait to buy it! :)
11:57 what is the good way to handle this edge case?
Next video i want on parallel page transition
great content
You're french
I was so not ready
This might be a silly question, but aside from god-tier effects, can all the other effects be achieved with Webflow? I'm currently using Framer for my website, but it's quite limited, so I'm gradually learning Webflow. Thank you for your helpful video!
1. wont using framer motions exit animations for components (could be a page) make parallel transitions easy? Like in a sense you make 1 page go out and other come in.
2. I had to do infinite slider where I had multiple instances of them on the page, scrolling odd number scrolls even numbered ones into opposite direction, i found that a huge pain in the ass as if you do not scroll them they are supposed to move on their own in slow pace, and dealing with touch devices was even worse :D
ahhaha image that i tried to do a god tier website for my portfolio, three years has pass by, but next month its going to be live finally
What you call "Parallel page transition" looks a lot like the "View transitions API" that works everywhere but Firefox and is very easy to implement, no need to hijack scroll.
Wow, I am amazed … to say the least
more videos like this pls :)
Great video! How do you handle accessibility for the Mask Split Text animation if you split each word/letter in a span?
Use aria-hidden="true" to hide individual letters from screen readers, and use a visually hidden element that is readable by the reader using a class like sr-only or aria-label. That's how I would approach towards an a11y solution.
Fact of the matter is, most of these website rarely care about being a11y compliant.
@@simonpeterdebbarma Thank you for the answer! It makes a lot of sense.
Bro, when's the course coming out??
really cool finds! can we get a list of the links of the sites talked about?
i was expecting you will teach us how to do all that's why I bring a coffee to follow along😥😥
Good work Olivier, but share the links of this websites in the description😁😉
What do you think, will we get a virtual touch glove to really feel these texture while interacting with these websites in VR?
Not right now I don't think so
I like how creative it is, but as user I hate to scroll through websites as distracting as billboards on a highway.
Remember when we had to use webkit to create gradient backgrounds, time flies...
have you a roadmap to beggin animations as a junior frontend?
Hlo there plz tell us how to create the line reveal which is present in Lusion website
26:57 by the time you fully understand how this code works, it will be out of trend
Do you have a tier list for JS libs for creative development? I'd love to see one. Also, are you planning on making a course?
24.20 can anyone tell me where can i learn this animation i am working on a project and this is the animation that will go on point with
Can you design websites like this through figma?
oh man I really wantedto do the depixelization image effect but I can't figure it out haha do you have a resource I could look at or something to type in google?
great video!. Could you make a tutorial of pixel image effect?. I'm struggling yet with that concept and I would like to know how the image is built in canvas :).
Noted!
Vídeo bastante interessante. E fiquei muito grato por ver o vídeo no meu idioma.
Could you please make tutorials for those animations. Specially for 3d timeline 😅
Gracias por habilitar el doblaje Español
Hello, can I get a list of websites from the video?
I thinkk 3D chrono is made with blender.. then you use 3d JS, it's the same concept as the little car that you can drive over the resume (website) it's relatively easy if you know blender
Liked and subscribed. Great content! Would you say that the "Video On Scroll" solution hurts conversions for DTC brands?
If done correctly I believe it helps with conversion
Bro, please teach us how to make difficult and advanced animations like these. Please make separate videos on it. ❤
noted!
Hey bro one question i also wanna learn these kind of modern web animations , it looks really cool , i know web development , but dont know anything of animation on web , can you tell me how can i start to explore this field ,
some tips , resources , pitfalls.. you have pls provide
check out my other videos I have a bunch on this subject
You said there are many tutorials can you pls share some ?
I know I ask for too much but can you make a video recreating the unseen studio project gallery animation , i would really appreciate it .
Noted!
@@olivierlarose1 man you truly are in the top 1% of web animators 🐐
Hey people, I am a multimedia student and this is my first time getting to knowing about web development. Too me, I'm finding it hard to understand why a client would pay for web animation? What is the motive behind adding so much complexity
Please give us more videos like this, this is one of the best web design video I've seen ever! ❤
Well, I guess depends on the client. In my experience, only one client requested a website with text gradients, text and image fade, and page transitions. By way the way, he is going make a difference in the market.
client mostly would not need complex animations, if you really watch the video before commenting, those are mostly webdev agency page, so it's a skill shows.
@@epicmetod Ohh, Did watch the video but didn't know about webdev agencies
12:01 Kids, remember nobody gives a sh*t about desktop web design. 80% of first impression web visits happen on mobile. Even in B2B, because everyone reads email on their phone.
junior *animator* right? not junior FE?
junior FE not animator
Це неймовірно
Where is parallax? i think is Advanced
Upon seeing this video, I want to give up being a front end dev
and here i thought frontend was kinda easy
Obrigado por dublar em português
when i learn something 100 of other GOAT things comes in the world i am getting kinda depressed
Olivier je savais au fond de moi qui tu parlais français, Guillaume Colombel t'as trahis. Très bonne vidéo
Tu as trouvé mon secret
They look nice but most of these animations suck on mobile or are basically useless on mobile where most users will interact with the website. they have bad user experience, accessibility and SEO. They also require heavy processing power from your PC or mobile.
The 3D development isn't that difficult, I think the hard part is creating the 3D model
W
i do not accept those designs as sufficient because acceptance includes submissive behaviour.
you deserve to work harder to avoid succumbing to an hostile market that is overpopulated like chinese area
stop using automatic translation in the tittle, in pt-br it doesnt even make any sense, no one will click it this way
Great stuff but the infinite scroll thing dose not deserve and award...common!
Are you fr?? The infinite scroll gallery doesn't?? nahh dawg, you're wrong
This guy is just scared of Shaders and overrates all shader effects
Waiting for the course❤
Waiting for the course❤