Top 10 Web Animation Trends of 2024

Those are my top 10 web animation trends of 2024.

0:00 Intro
0:22 #1: Masks
1:11 #2: Pixel Transition
1:39 #3: 3D timeline
2:12 #4: Sticky Footer
2:36 #5: Split Text
3:05 #6: Text Based Project Gallery
3:36 #7: WebGL Image Gallery
4:36 #8: Fixed Image
5:12 #9: Line Mask
6:01 #10: Pannel Transition
6:38 Outro

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #threejs

[by_huy]

SOGAI mentioned 🗣🗣 Awesome video as always Oli, loved this one man!

Really exciting to see how web animation trends keep evolving from here

[Yas__]

great video! I don't know if it's just me, but lately, let's say in the last 3/4 months, I had the impression that many people are trying to learn three.js and similar libraries, I guess the web is evolving on that path too

[Eyesrceam]

Now we need a tutorial on each animation on framer ❤

[ggunnerr]

Love the video. Can you please let me know some resources with structured curriculum (paid or free) to learn these modern animations?

[barkat.ayesha]

1st one was super cool and totally different i never seen. 2nd one 😲. Thank you for sharing this side ❤

[germancho-dev]

Great content as always Olivier! I've been lately working on 3D, it really another world, these past 2 weeks I think I've been entirely working just on Blender, not even touching threejs, but it is really cool and I am really close to implement this in my portfolio.

[joshchant]

Cant wait any longer for your course to come

[ObitoUchiha-sbvm]

Thank u for ur professional opinion!
It was very useful and helpful

[randeeprana]

These websites are really amazing, inspiring as well as hard to create.

[WPSoul]

Problem with these kind of animations is that mostly users will not see them as they are not working on mobiles.

[DeberiasTenerUnGato]

Another example of a footer is Red Barrel's website 🔥

[code.design]

Anyone has a list of the sites used? Would love to see them credited.

[choOz]

great video! two things:
1. isn't the sticky part of the name sticky footer redundant?
2. what is the line mask? i couldn't grasp what the animation looked like in the footage you showed.

keep the great content coming 👑👑

[unfilteredmanas]

Wow !!


How i create these types of animation.
Any guide/ tutorial

[muhammedafrar]

Hi Oli, Please post another tutorial video... Like website startup animation ❤

[ritwik]

Can you make tutorial on all of these animations pleaseee!

[Divyv]

Hey Olivier, really nice video ! I was wondering if I could help you with more Quality Editing in your videos and also make a highly engaging Thumbnail and also help you with the overall youtube strategy and growth ! Pls let me know what do you think ?

[rvsdesk]

Cool websites, you are inspiring… hope one day I can create something like these, please let me know from where I should start to learn. or if you can make a video on this topic😊❤

[hermanemanuelsson]

Great video! Do you have any page transition workaround/ alternative for nextjs using app router?

[blossomdoom]

Can you make a video on how to do the contact form of the TUX website?