It’s funny when I think back to the memes where kids ask the teachers “when will I ever use math in my real life”. I guess the teachers are having the last laugh now.
I find it quite straightforward, to be honest. When you work with pseudo-root rem calculations embedded in media queries, the only truly "static" breakpoints you'll have are for tablet and mobile. Even then, those breakpoints are only partially static, since typography and most size distributions are handled by the query matrix. Here's an example from a recent project I worked on: html { font-size: 1rem; } @media screen and (max-width: 3000px) { html { font-size: 1rem; } } @media screen and (max-width: 1440px) { html { font-size: calc(0.0635rem + 1.0406vw); } } @media screen and (max-width: 479px) { html { font-size: calc(-0.0021rem + 3.3473vw); } } I only use three main breakpoints for rem calculations, with a linear increment from mobile to desktop. Everything above 3000 pixels screen width caps there, but that's a customer request. You can configure that limit however you like. Layout shifts for width changes can be managed by adding screen-width-specific utility classes that adjust flexbox or grid-column attributes. The big advantage of this approach is that you can handle 90% of breakpoint variations through centralized variables. For me, defining these starting conditions is a key part of every style guide brainstorming session. Building the entire front-end structure around this concept helps prevent most of the common headaches that arise during long-term projects.
GSAP ScrollTrigger doesn’t actually use Intersection Observer under the hood. Instead it pre-calculates the exact scroll position animations should happen. Browser support is also considerably better than Intersection Observer! The GSAP team did an amazing job with it. Enjoyed the video, keep up the good work 😎
🎯 Key points for quick navigation: 00:29 *🚀 Scroll tracking is a key animation technique that tracks scroll progress to create fancy animations.* 01:52 *🖥️ Viewport detection is crucial for triggering animations when elements enter the viewport.* 02:49 *📍 Sticky position utilizes CSS sticky position for creating smooth and supported animations in all browsers.* 03:44 *🎭 Mastering easing functions is essential for setting the mood and character of a website.* 04:41 *📜 Text splitting technique allows for deconstructing paragraphs into lines, words, and characters for creative typography animations.* 06:18 *🔄 Bonus techniques like the map function, linear interpolation (lerp), and shaders offer more subtle yet powerful ways to enhance animations.* Made with HARPA AI
In all honesty if you are looking to learn these techniques from today, you would do better to look at the latest in CSS as eventually these JavaScript solutions will soon be obsolete.
sucks to be a designer, know all those fundamentals but not being able to code. Now I feel like the industry is finally going to no-code or low code enough I can learn. thanks for sharing those tips, it really helps adapting to a dev mindset.
nice video dude!love it. u have to do a video using the viewport detection,will be great!. ow the problem with the animations are they are not so easy to makeit responsive...kinda hard,and heavy for the devices.
Hi Olivier! Since you've mentioned Lenis, here's a question I've been meaning to ask for a while: On Safari, the scrollbar default behaviour is to fade away once you're done scrolling. However, when you use Lenis, if you hover on the scrollbar, then it becomes stuck and does not fade away anymore. Have you ever noticed? This kind of bothers me becomes it changes the default behaviour somehow
I tried to leave math but math never leaves me
😂😂😂😂
Leave animation then📈
me too
Laughing so hard to this 😭
It’s funny when I think back to the memes where kids ask the teachers “when will I ever use math in my real life”. I guess the teachers are having the last laugh now.
agreed, as a developer myself i found the hardest part of web animation is responsive handeling.
Same
+1
So what's your preferred method for handling these web animation in smaller viewports? Graceful degradation or Progressive enhancement ?
@@TheSabatuer responsive design is by far the most annoying and depression-inducing part of fronted
I find it quite straightforward, to be honest. When you work with pseudo-root rem calculations embedded in media queries, the only truly "static" breakpoints you'll have are for tablet and mobile. Even then, those breakpoints are only partially static, since typography and most size distributions are handled by the query matrix.
Here's an example from a recent project I worked on:
html { font-size: 1rem; }
@media screen and (max-width: 3000px) {
html { font-size: 1rem; }
}
@media screen and (max-width: 1440px) {
html { font-size: calc(0.0635rem + 1.0406vw); }
}
@media screen and (max-width: 479px) {
html { font-size: calc(-0.0021rem + 3.3473vw); }
}
I only use three main breakpoints for rem calculations, with a linear increment from mobile to desktop. Everything above 3000 pixels screen width caps there, but that's a customer request. You can configure that limit however you like.
Layout shifts for width changes can be managed by adding screen-width-specific utility classes that adjust flexbox or grid-column attributes.
The big advantage of this approach is that you can handle 90% of breakpoint variations through centralized variables. For me, defining these starting conditions is a key part of every style guide brainstorming session. Building the entire front-end structure around this concept helps prevent most of the common headaches that arise during long-term projects.
Thank you for sharing the names of these animation. As a beginner it's very hard to learn something if you don't know the name.
You look so young yet you've done so many things already. Very impressive.
Thanks for the explanation! Opened my mind up to more possibilities to do with animations. You've put GSAP on my list of things to learn now.
When you going to release the web animation course? Great vids!!
I'm ready to spend some money on it for sure.
GSAP ScrollTrigger doesn’t actually use Intersection Observer under the hood. Instead it pre-calculates the exact scroll position animations should happen. Browser support is also considerably better than Intersection Observer! The GSAP team did an amazing job with it. Enjoyed the video, keep up the good work 😎
Intersection Observer has been available in all major browsers for ages 😂
Underrated channel. Great videos explaining web animation in a brief.
Missed this - Lovely video, really informative, thanks for helping the web animation community. 💚
You put everything I want to learn in a video ! Incredible video once again !
Very useful techniques, you are my hero. Thank you so much
I made a list of these and plan to master thanks to you. Cheers
Thanks for including links dude!
Thank you for sharing. It would be great if you could curate a playlist of projects that focuses on these animation techniques.
it will be soooo nice if he could do something like this 🎉🎉
0:05 nice model of yours olivier
Nice! Thanks for creating this video! Very helpful.
When you gonna drop the animations course?
Super informative. Thank you for sharing your knowledge!
You've got a new subscription bud! Very informative content and pleasant way of explaining. Keep it up!
🎯 Key points for quick navigation:
00:29 *🚀 Scroll tracking is a key animation technique that tracks scroll progress to create fancy animations.*
01:52 *🖥️ Viewport detection is crucial for triggering animations when elements enter the viewport.*
02:49 *📍 Sticky position utilizes CSS sticky position for creating smooth and supported animations in all browsers.*
03:44 *🎭 Mastering easing functions is essential for setting the mood and character of a website.*
04:41 *📜 Text splitting technique allows for deconstructing paragraphs into lines, words, and characters for creative typography animations.*
06:18 *🔄 Bonus techniques like the map function, linear interpolation (lerp), and shaders offer more subtle yet powerful ways to enhance animations.*
Made with HARPA AI
Developer here. This is a great video!
Beautiful examples!! 🎉👏🏻♥️🙌🏻💯
In all honesty if you are looking to learn these techniques from today, you would do better to look at the latest in CSS as eventually these JavaScript solutions will soon be obsolete.
You can create scroll driven animations in css only. Js always adds lag to those things
The website examples are incredible do you have links to them to share ?
This is really nice and the ideas are quite unique
Hey, first of all great channel. I'd like to know what website is at 0:30?
I'm pretty sure it's the awwwards website :-)
Love the video. Don't like scroll jacking on websites
Awesome video - super informative!
AWESOME video as all of your videos!! many many thanks.
could you please make tutorial or course how to build these crazy animations
sucks to be a designer, know all those fundamentals but not being able to code. Now I feel like the industry is finally going to no-code or low code enough I can learn. thanks for sharing those tips, it really helps adapting to a dev mindset.
Saving this video right now !!!
Amazing tools 😍😍😍😍😍😍🔥
nice video dude!love it.
u have to do a video using the viewport detection,will be great!. ow the problem with the animations are they are not so easy to makeit responsive...kinda hard,and heavy for the devices.
What an amazing video, I really want to start learning for being a Creative Developer.
Heyy @oliver How do you build websites like 5:12??.... I'd really like to know, I mean what stack specifically would do something similar?
Fun Fact: You can do almost all these animations in Framer (website building tool)
can you please make a video on how to handle these animations in responsive design
You could make a video using the map and lerp function. I never heard about
thank bro, u help my website look better with a lot of animation
Great tips and tuts, but what hooked me into subbing is that Basquiat in the back :)
You mention the `map` existing on the vanilla JS Number object as well as in CSS, but I can't find it anywhere. Got a link you could point us to?
Can you make tutorials for each of the techniques?
hey Olivier, can you please tell the resources you followed to learn all these crazy animations or can you make tutorial
Hi Oliver, your blog site is so clean. I was wondering what syntax highlighting you use for the code in your blog?
Thank you, it was helpful
Bro is simply the goat
So what's your preferred method for handling these web animation in smaller viewports? Graceful degradation or Progressive enhancement ?
Super interesting!
Thx for this video ! About sticky animation, the goal is to handle sticky by add or remove class who give sticky position based on scroll? Right ?
Man, i love your videos
Awesome videos. Do you ever use typescript and tailwind in your real life projects?
3:54 Má Sài Gòn that had me laughing so hard lmao =)))))
Hi Olivier! Since you've mentioned Lenis, here's a question I've been meaning to ask for a while:
On Safari, the scrollbar default behaviour is to fade away once you're done scrolling. However, when you use Lenis, if you hover on the scrollbar, then it becomes stuck and does not fade away anymore.
Have you ever noticed? This kind of bothers me becomes it changes the default behaviour somehow
please make the apple navbar with Next JS or React. How does they make the dropdown so smooth?
My biggest difficulty in building these sites is the mobile version
So what's your preferred method for handling these web animation in smaller viewports? Graceful degradation or Progressive enhancement ?
THanks ,keep posting videos like this
Love the mic quality man!
Thank you!! 🎉
Is there a course that you recommend for learning animations?
please taught us all these techniques by making a full animated awwward website
Very useful thoughts!
What is the website in the beginning where there are a lot of websites
Thanks for the video ❤❤❤
When will your animation course be available ?
Where can I learn to build websites like these? Any resources? I know HTML, CSS, JS.
Can you make a tutorial on how to make these animation in framer/ Figma software?
talk to us about your experience at locomotive
Nice as always.
Thanks ❤
i would appriciate share some of the links you showed
merci Olivier
thanks
Wow great content!
Thank you for tha video ❤️
Bro I've been doing this Math.map function manually in my project and you're telling something already exists
No way.
How?? He mentions it existing on the vanilla JS Number object as well as in CSS, but I can't find it anywhere.
Thank you! Very helpfull
Scroll sriven animations let's go
bro, I need a course. I have been waiting for your course since forever. when is it dropping? and do early birds get a discount?
I'm wondering, to make the website more unique, just adding animation is enough for everyone
hye can you tell us how we can learn and master these techiniques?
You're such an artist for a developer
Any good resources to get into animations?
Love the video! Keep it up
shheeeeeeeshhh
Layout + animaiton + responsive
hello, can someone help me why when i use lenis scroll in my react project my scroll is not working? pls help even chatgpt cant find the problem
Could you tutorials on that
Great video 🎉
make an web animation course from scratch, include all basics for all dev
I want to learn how to build websites like these!
when is the paid course coming?
I want to know what website is that.
in 9:12
What is your tech stack
framer >
A course for animations? When
do you install framer motion AND gsap on your websites , or only one ?
Most of the times I use both, each is good in specific scenarios
❤
I WANNA JOIN YOUR WEB ANIMATION COURSE