My Top 5 Techniques for Web Animation

If I only had to learn 5 animation techniques, these would be the ones.

00:41 1. Scroll Tracking
1:46 2. Viewport Detection
2:42 3. Sticky Position
3:37 4. Easing
4:43 5. Text Splitting
5:58 Bonus Techniques
6:22 Bonus 1: Map Range
7:39 Bonus 2: Lerp
8:20 Bonus 3: Shader
9:34 Outro

Thanks for watching!

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

[zDelek]

I tried to leave math but math never leaves me

[jaminpie]

agreed, as a developer myself i found the hardest part of web animation is responsive handeling.

[fujaielxrahman]

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.

[ZawCodes]

You look so young yet you've done so many things already. Very impressive.

[tomhuynh]

I randomly stumbled upon this video and am so glad I did. Thanks for this!

[alanmurray]

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 😎

[yashk]

yt algorithm for the win, another one of the vids which I did not know I needed

[damianlarocca]

🎯 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

[zhengweing]

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.

[ramiropeidro]

When you going to release the web animation course? Great vids!!

[olivierdeswart]

Dope! As someone starting out on FE development, this is very cool to see. Thanks!

[uxbyalim]

Underrated channel. Great videos explaining web animation in a brief.

[GreenSockLearning]

Missed this - Lovely video, really informative, thanks for helping the web animation community. 💚

[simoneblax]

It would be cool if you made video that explain how to do every single one of them. Is it possible?

[NoWaye]

You put everything I want to learn in a video ! Incredible video once again !

[deX_s]

My biggest difficulty in building these sites is the mobile version

[induniljay]

could you please make tutorial or course how to build these crazy animations

[alistoicakovacs]

You've got a new subscription bud! Very informative content and pleasant way of explaining. Keep it up!

[mosjunk]

I made a list of these and plan to master thanks to you. Cheers

[DavidHust]

Never understood these scrolling animation webpages. It's so annoying to scroll through and through and then go back to look at something from before. It seems more like a flex than actual usefulness for the user.