How Difficult Are These Web Animations?! (TIER LIST)

[@ssamaddd]

Waiting for the course❤

[@Vextor007998]

The animations are really great, but there's nothing better than a website that is clear and where everything doesn't move around.

[@Neon-Geco]

ye, its been shown that too much of design (as in art heavy website) doesn't convert as well as simple oldschool website -- there is a sweet spot, and less is usually more

[@whatsgoinon150]

Exactly, way too much eye candy and too less good UX

[@afrosymphony8207]

Exactly, i never could use any of these websites cause they cpu memory sucking demons. only ppl on a high end computer can usually easily move around in these sites

[@whatsgoinon150]

@@afrosymphony8207 Yes thats the point. If you company uses HP laptops from 2020 it will probably not have the same look and feel like on a newer MacBook pro

[@pnel]

It's so useful to establish some sort of standard naming convention for all these effects, thanks a lot (as always)

[@MOGO-u9v]

Looks like I just found my 2025 animation to-do list- thanks again, Oliver!

[@hanscesa5678]

I can tell by the look on your face that you love doing this kind of stuff, and you're really good at it!

[@francoezequiel872]

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

[@smartfridgee]

Great video, as always. And those balloons at 11:35 lmao.

[@cityisbetter]

yeaa 😆

[@olivierlarose1]

not sure what happened there haha

[@cityisbetter]

@@olivierlarose1 apple's reactions, triggered when u did ✌🏻, they have other effects when u do thumbs down/up and heart symbol with your hands

[@Code-sz9db]

NOICE video!! Can't wait to see some of the Advanced or God tier animation tutorials.

[@yarukolo4285]

i dont really often leave comments but this video ngl is AWESOME. never saw this before

[@sujoykrhaldar]

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

[@olivierlarose1]

Noted!

[@esamueljsx]

@@olivierlarose1 thank you

[@Alex.Shalda]

Great idea 🎉

[@gunjanvyas695]

And please share resources as well

[@martinsosa6965]

This is such a great idea ! I would love a roadmap for animations

[@fujaielxrahman7352]

Hey, bro! You don't know how much your video helped me for a beginner like me. Hope to see more videos from you!

[@jarmel3745]

This is quality content. Thank you!

[@bobaFAT537]

Thanks for sharing these amazing websites and your vision!

[@irfansaeedkhan7242]

kindly teach us each effect in a series starting from split text , mask etc

[@mazlanhalim9141]

Awesome review Olivier. Now my new year 2025 resolution is to master God tier! 💪🏻😎

[@Christian-ql4vw]

you have great content !!

[@TaimoorShahzada]

Great video Olivier ❤🙏🏻

[@Virtualshubs]

3d Doom es brutalismo animado :) muy bonitas todas. Buena revisión de contenidos

[@loground]

Great work as always!

[@rickdg]

Surprised to still see so much work invested in effects that almost don’t translate to touchscreens.

[@feldinho]

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.

[@Nika_Scott]

Glad I discovered your channel 😄

[@esamueljsx]

Learned a lot. Thanks man ❤❤

[@3dwebsites.]

thank you for your content!

[@alandouglas96]

Here's another comment to support the animations course! 🙏🏻

[@hetiikzclan]

Remember when we had to use webkit to create gradient backgrounds, time flies...

[@samcharo]

Good work Olivier, but share the links of this websites in the description😁😉

[@barberbarberski5924]

what about accessibility when doing this weird animations? It's good only for landing pages etc.

[@whatsgoinon150]

It’s horrible for accessibility. It is utterly complex to adjust this kind of websites to be suitable for accessibility. Neither it’s good for SEO and I guess also not for conversion. for me those websites are appealing to scroll trough and more like a piece of art, but not a good choice for a real world example

[@codenv-info]

Great one !!! Thanks and Please make a video about custom shaders and gradients

[@ARiyou2000]

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

[@stickerey]

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

[@razor5043]

Waiting your web animation course!!!

[@considercaption]

Interesting. Id love to do a video with you detailing these awwwards style interactions in a no code tool like framer and maybe do some examples?

[@zzuji]

goated individual, goated content 👩‍🍳

[@hubbahu]

34:10 for the 3d one id say its more likely to be raymarching with that lighting but other than that guassian blur

[@jsantos1220]

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

[@yungdigit]

Hi Olivier, when are you planning to launch your web animation course? Can't wait to buy it! :)

[@Akshay.7S]

Bro, please teach us how to make difficult and advanced animations like these. Please make separate videos on it. ❤

[@olivierlarose1]

noted!

[@omriwr]

Great video!

[@Alex.Shalda]

Wow, I am amazed … to say the least

[@ecereto]

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.

[@florentgironde7279]

really nice video

[@bradkpojr]

more videos like this pls :)

[@zainuldin9095]

i was expecting you will teach us how to do all that's why I bring a coffee to follow along😥😥

[@kaixa696]

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!

[@Lgpforgetthischannel]

You're french I was so not ready

[@herrDOS]

26:57 by the time you fully understand how this code works, it will be out of trend

[@thetchana]

Vídeo bastante interessante. E fiquei muito grato por ver o vídeo no meu idioma.

[@HemstitchedIrony]

3d timelines are actually not as hard as you think, making them that impressive is extremely hard, but they can be quite simple to make

[@metanevis]

Awesome content

[@Deus-lo-Vuilt]

Gracias por habilitar el doblaje Español

[@whattuan]

really cool finds! can we get a list of the links of the sites talked about?

[@Jordan-Tech]

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

[@AakifAhamed-m3c]

Could you share your roadmap? i am passionate about web development pls :)

[@olivierlarose1]

Noted!

[@MartinDlabaja]

I like how creative it is, but as user I hate to scroll through websites as distracting as billboards on a highway.

[@adityabansal6272]

Next video i want on parallel page transition

[@miguelrivas9687]

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 :).

[@olivierlarose1]

Noted!

[@Yassine__G97]

great content

[@odehkole1810]

nice

[@onlyanime9722]

when will you release your web animation course?

[@masterize]

Great video! How do you handle accessibility for the Mask Split Text animation if you split each word/letter in a span?

[@simonpeterdebbarma]

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.

[@masterize]

@@simonpeterdebbarma Thank you for the answer! It makes a lot of sense.

[@vigilantezack]

I have no idea how any of this is done to be honest. I still think in HTML and CSS terms. How do you do any of this with a div? Is this all canvas and working the internals of SVGs? I can understand how one element can "move around" or be attached to scroll position or mouse position, but then when that element interacts with something else completely, like the background image of the page, I'm not even conceptually understanding how they talk to each other. You talk about "shaders" but when I think of shade I think of shadows like box shadows or something. I've got so much to learn haha

[@whatsgoinon150]

Mostly works with ScrollTriggers (GSAP) or with rive, spline or .json files. You can export a video sequence to single frames and animate those frames with a certain trigger. Can be a background video or a 3D rendering for instance

[@kushyglowy8409]

Love it

[@theflametr]

Could you please make tutorials for those animations. Specially for 3d timeline 😅

[@moodyhamoudi]

Design guide plz 🙏🙏🙏

[@lakshyaroy6240]

Please create a video on how to create a sales or mobile responsive dashboard with next js and tailwind and no other npm packages like mui … There is no video regarding that on KZbin can you make it?

[@DesignfulDev]

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?

[@bryanelliott4589]

Liked and subscribed. Great content! Would you say that the "Video On Scroll" solution hurts conversions for DTC brands?

[@olivierlarose1]

If done correctly I believe it helps with conversion

[@CollinsTech-d4m]

could anyone list the different kinds of tools one could use in making these different kinds of animation?

[@advaitbhore]

What do you think, will we get a virtual touch glove to really feel these texture while interacting with these websites in VR?

[@olivierlarose1]

Not right now I don't think so

[@Asyedabdulrahman33]

where did you learning these. if someone knows kindly share

[@onlyanime9722]

What will be the price of your course? and when will you release it ? i am eagerly waiting

[@harshitgupta4148]

can you please tell me a website for all this JS libraries , where i can find these libraries with their use cases ,

[@nicolettifps]

have you a roadmap to beggin animations as a junior frontend?

[@MohamedKhairy-u5x]

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 .

[@olivierlarose1]

Noted!

[@MohamedKhairy-u5x]

@@olivierlarose1 man you truly are in the top 1% of web animators 🐐

[@zacmuturi4522]

Bro, when's the course coming out??

[@raimondszakis8337]

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

[@thedaveko]

how much of these animations are through coding vs. using something like Rive or Lottie/json files?

[@olivierlarose1]

95% of those examples are made through coding

[@thedaveko]

@@olivierlarose1 that's incredible! i've been a motion designer/aniamtor for almost 3 decades and have recently been tinkering with Rive, but what you guys are able to do with coding alone is amazing! in your opinion is something like Rive which creates interactive animations something that web devs would like more of?

[@kyrian2052]

Can you design websites like this through figma?

[@mryodak]

Metaballs have nothing to do with matrix transformations, it's a pixel by pixel operation where you just posterize at a value.

[@onlyanime9722]

What will be the price of your course?

[@Neera-codes]

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

[@olivierlarose1]

check out my other videos I have a bunch on this subject

[@daviddiniz5663]

Obrigado por dublar em português

[@alicereel]

Це неймовірно

[@carlosleovera4594]

Where is parallax? i think is Advanced

[@sideone3581]

But, how do you center a div?

[@frederiklenk7756]

imo the pixel shader is lower than the signed distance field

[@zoistoik]

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?

[@dopetag]

11:57 what is the good way to handle this edge case?

[@artzoneproductions3474]

*A website with animations throw me off and give me a lot of unsafety vives and I always try to avoid them when it come to consume a product of them, the simpler the better.*

[@នីន-ស7ដ]

how long u study about it?

[@Jatin-gj4uf]

Hlo there plz tell us how to create the line reveal which is present in Lusion website

[@RubbasyarkhanYarkhan]

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

[@marlock2.02]

Hello, can I get a list of websites from the video?

[@blancvit]

How do you find these websites?

[@Sodiq_the_Creator]

You said there are many tutorials can you pls share some ?

[@pizzafrommars22]

W

[@mariusnogueron]

Olivier je savais au fond de moi qui tu parlais français, Guillaume Colombel t'as trahis. Très bonne vidéo

[@olivierlarose1]

Tu as trouvé mon secret

[@whatsgoinon150]

Man those eye candy websites probably convert horrible. You have to keep in mind that the user could be your 60 year old dad using his smart phone with his middle finger. Do you really think those designs are suitable for this kind of users? I heavily doubt it.

[@olivierlarose1]

I agree with you, but you have to keep in mind who is going to use your website. If you're let's say a creative agency, your target audience are companies who are trying to have a unique image, not a 60 year old dad

[@dinoscheidt]

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.

[@nickwoodward819]

junior *animator* right? not junior FE?

[@olivierlarose1]

junior FE not animator