YouTube
2023: Master JavaScript Animations With GSAP | Learn GSAP From Scratch |
Popular Web Animation Technique
- Scroll tracking: ScrollTrigger by GSAP, useScroll by Framer Motion (need to combine with Smooth scroll like LENIS or locomotive-scroll)
- Viewport Detection (Intersection Observer API or just use ScrollTrigger or useInView)
- Sticky Position (
position: sticky; top:10px): very powerful and easy to implement - Easing (More info: https://motion.zajno.com/)
- Text Splitting: GSAP SplitText or SplitType. Can be bad for accessibility
Subtle technique
- Map function (math):
gsap.utils.mapRange(-10,10,100,200,0) - LERP (Linear Interpolation): use it for cursor stuff
const lerp = function(start,end,t)
{
return start * (1 - t) + end *t;
}- SHADER (must know if you want experimental, artistic stuff)
Code examples
https://blog.olivierlarose.com/courses/web-animation-course
Sticky footer: https://blog.olivierlarose.com/tutorials/sticky-footer