Olivier Larose
Olivier Larose
  • 44
  • 698 464
My Top 10 Resources for Web Animations
If I could only keep 10 ressources, it would be them.
0:00 Intro
0:27 Codrops
1:21 Twitter
2:07 Three.js Journey
3:07 Curation Websites
3:45 Developer Inspector
3:45 Stack Overflow
4:48 Yuri Artiukh
5:37 Maxime Heckel
6:18 Fabio Ottaviani
7:20 Ksenia Kondrashova
8:27 Sebastian Lague
9:50 Clean Code (Book)
10:43 The Creative Act (Book)
11:51 Outro
My curation websites:
browsingmode.com/
klikkentheke.com/
godly.website/
www.siteinspire.com/websites/11958-deeo-studio
loadmo.re/
www.hoverstat.es/
ilovecreatives.com/internet-gems
www.landing.love/
land-book.com/
webflow.com/made-in-webflow/portfolio/popular
www.lapa.ninja/
onepagelove.com/
www.seesaw.website/
a-fresh.website/
unboundbydefault.com/
More animations: blog.olivierlarose.com/
Follow me on Twitter: olivierlarose_
Discord Channel: discord.com/invite/2QPNYtazQq
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #threejs
มุมมอง: 13 520

วีดีโอ

GSAP vs Framer Motion for React
มุมมอง 18K21 วันที่ผ่านมา
Which one should you use in your project? GSAP or Framer Motion? In this video I take a look at the pros and cons of each and which one I would learn first. 0:00 Intro 0:27 GSAP Pros #1: Powerful 1:13 GSAP Pros #2: Versatile 1:50 GSAP Pros #3: Community 2:42 GSAP Pros #4: Timelines 3:36 Biggest problem with GSAP 4:19 FM Pros #1: Declarative 5:43 FM Pros #2: Motion Values 6:08 FM Pros #3: Animat...
My Top 5 Techniques for Web Animation
มุมมอง 63Kหลายเดือนก่อน
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 More animations: blog.olivierlarose.com/ Follow me on Twitter: olivierlarose_ Discord Channel: discord...
Build a Curved Image using R3F and Framer motion
มุมมอง 4.3Kหลายเดือนก่อน
A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion Source Code / Live demo: blog.olivierlarose.com/tutorials/mouse-image-distortion 0:00 Intro 0:27 Project overview 0:55 Creating a basic 3D plane 3:38 Moving the plane on mouse move 10:32 Adding an easing on mouse move 14:49 Adding a basic shader 16:29 Adding an image...
Build a Text Parallax Animation with React and Framer Motion
มุมมอง 7K2 หลายเดือนก่อน
A website animation featuring a Text Parallax with sliding text on scroll, made with Framer Motion and React, inside a Next.js app Source Code / Live demo: blog.olivierlarose.com/tutorials/text-parallax 00:00 Intro 00:16 Project Overview 00:46 Putting all phrases aligned 2:49 Adding asymmetry 3:54 Tracking the Scroll 6:15 Translating on Scroll 8:04 Adding directions 9:33: Playing with values 10...
2 Ways To Make an Awwwards Sticky Footer
มุมมอง 7K2 หลายเดือนก่อน
A website tutorial featuring a sticky footer animation with a reveal effect, made with position fixed and sticky using React and CSS. Source Code / Live demo: blog.olivierlarose.com/tutorials/sticky-footer 0:00 Intro 0:21 Project overview 0:36 Limitation of the sticky footer 1:04 Method #1: Fixed position 3:38 Downside of the Method #1 4:11 Method #2: Sticky position 7:04 Outro More animations:...
Build a Parallax Section Transition with React and Framer Motion
มุมมอง 10K2 หลายเดือนก่อน
A website tutorial featuring a perspective transition animation with a smooth scroll using React, Framer Motion, Next.js and Lenis Scroll. Inspired by: www.joinflowparty.com/ Source Code / Live demo: blog.olivierlarose.com/tutorials/perspective-section-transition 00:00 Intro 00:22 Project overview 00:51 Making the section sticky 2:04 Tracking the scroll 3:54 Animating on Scroll 7:34 Outro More ...
Build a Paint Reveal Effect using the Canvas API and React
มุมมอง 3.7K2 หลายเดือนก่อน
A website tutorial on making a paint reveal / erasing effect using the destination out blend mode of the canvas API, made with React and Next.js Source Code / Live demo: blog.olivierlarose.com/tutorials/paint-reveal 00:00 Intro 00:37 Project overview 1:28 Initializing the Canvas 4:58 Draw Circles on Mouse Move 7:46 Adding the Erasing effect 9:37 Preparing values for the Lerp 13:03 Lerp explaine...
5 Things I Learned in my Journey as a Developer
มุมมอง 6K3 หลายเดือนก่อน
A quick video explaining some things I learned in my journey as a developer. 00:00 Intro 00:30 5 Developer Paths 04:46 #1 Work for Free 06:47 #2 Find your Edge 13:26 #3 Don't be a Hermit 17:28 #4 Start Before you Know How 20:34 #5 See School for What It Truly Is 26:24 Outro More animations: blog.olivierlarose.com/ Follow me on Twitter: olivierlarose_ Discord Channel: discord.com/inv...
Build a Wave Distortion Shader using Three.js and React
มุมมอง 5K3 หลายเดือนก่อน
A website animation tutorial featuring a vertex distortion shader with a wave animation applied on a plane. Made with React Three Fiber, Framer Motion and Next.js Source Code / Live demo: blog.olivierlarose.com/tutorials/3d-wave-on-scroll 00:00 Intro 00:24 Project set up 01:38 Dynamic import 02:50 Creating a plane 04:44 Wave anatomy and Sine function 06:03 Creating a Basic shader 10:07 Creating...
How to Make Page Transitions using Next.js and GSAP
มุมมอง 20K4 หลายเดือนก่อน
A website tutorial featuring page transitions using Next.js and GSAP. Inspired by tweenpages.vercel.app/. Source Code / Live demo: github.com/olivierlarose/nextjs-gsap-page-transition 00:00 Intro 00:51 Final result 01:32 Credits 02:08 Delaying the router 05:25 Fade in / Fade out Transition 08:35 Fixing scrolling issue 09:48 Initial Animation 10:39 Importance of flexibility 11:36 Adding a Provid...
How to use Blend Modes with a Custom Cursor using React and GSAP
มุมมอง 4.9K4 หลายเดือนก่อน
A website tutorial featuring a moving cursor on mouse move, colored with CSS blend mode difference, made with React and GSAP. Inspired by trionn.com/ Source Code / Live demo: blog.olivierlarose.com/tutorials/blend-mode-cursor 00:00 Intro 00:26 Moving the cursor 5:33 Easing on the cursor 10:59 Adding CSS Blend Mode 11:54 Animating on Hover 15:09 Adding multiple cursors 22:36 Outro More animation...
How to Move a Text on an SVG Path on Scroll using React
มุมมอง 6K4 หลายเดือนก่อน
A website tutorial on how to animate a a Text along an SVG Path on Scroll using React and Framer Motion. Used with the Lenis Scroll for added smoothness and Next.js. Inspired by: chivichivi.com/en/ Source Code / Live demo: blog.olivierlarose.com/tutorials/text-along-path 00:00 Intro 00:38 Creating the SVG 1:22 CSS styling 1:55 Adding texts on the curve 5:00 Tracking the scroll 7:13 Moving the t...
How to Make a 3D Glass Effect using Three.js and Next.js
มุมมอง 16K5 หลายเดือนก่อน
A website tutorial on how to create a Glass looking Material with distortion by using the MeshTransmissionMaterial with Three.js, React, React Three Fiber and Next.js. Source Code / Live demo: blog.olivierlarose.com/tutorials/3d-glass-effect 00:00 Intro 00:19 Asset Preparation 3:01 Rendering the Canvas 5:16 Rendering the mesh 6:47 Adding lights 8:25 Adding responsiveness 8:49 Rotating the mesh ...
This is How I Made a Creative 404 Page
มุมมอง 6K5 หลายเดือนก่อน
After reviewing my subscribers 404 page, here's how I made mine. 00:00 Intro 00:15:10 Design 1:44:01 Programming 3:41:16 Outro More animations: blog.olivierlarose.com/ Follow me on Twitter: olivierlarose_ Discord Channel: discord.com/invite/2QPNYtazQq Thanks for watching! #react #nextjs #awwwards #gsap #framer #motion
Reviewing my Subscribers 404 Page
มุมมอง 4.5K5 หลายเดือนก่อน
Reviewing my Subscribers 404 Page
How to Make a Zoom Parallax using Next.js and Framer Motion
มุมมอง 22K6 หลายเดือนก่อน
How to Make a Zoom Parallax using Next.js and Framer Motion
How to Make a Text Gooey Morph Effect using React
มุมมอง 5K6 หลายเดือนก่อน
How to Make a Text Gooey Morph Effect using React
2 Ways to Make a Scroll Parallax in React
มุมมอง 13K6 หลายเดือนก่อน
2 Ways to Make a Scroll Parallax in React
This is why you should be a Creative Developer in 2024
มุมมอง 8K7 หลายเดือนก่อน
This is why you should be a Creative Developer in 2024
I Rebuilt 3 Awwwards Page Transitions using Nextjs and Framer Motion (Page Router)
มุมมอง 44K7 หลายเดือนก่อน
I Rebuilt 3 Awwwards Page Transitions using Nextjs and Framer Motion (Page Router)
Build a Text Gradient Opacity on Scroll using Nextjs and Framer Motion
มุมมอง 16K8 หลายเดือนก่อน
Build a Text Gradient Opacity on Scroll using Nextjs and Framer Motion
Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js
มุมมอง 20K8 หลายเดือนก่อน
Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js
Rebuild an Awwwards Side Menu with Framer Motion and Nextjs
มุมมอง 15K8 หลายเดือนก่อน
Rebuild an Awwwards Side Menu with Framer Motion and Nextjs
Build a 3D Float Effect using Three.js, Framer Motion, Next.js
มุมมอง 6K9 หลายเดือนก่อน
Build a 3D Float Effect using Three.js, Framer Motion, Next.js
How to Make an Animated SVG Curve using Next.js, Sine, Linear Interpolation
มุมมอง 8K9 หลายเดือนก่อน
How to Make an Animated SVG Curve using Next.js, Sine, Linear Interpolation
How to Make a Pixel Transition Effect using Next.js and Framer Motion
มุมมอง 8K10 หลายเดือนก่อน
How to Make a Pixel Transition Effect using Next.js and Framer Motion
How to Make a Sticky Cursor with NextJs and Framer Motion
มุมมอง 16K10 หลายเดือนก่อน
How to Make a Sticky Cursor with NextJs and Framer Motion
Build a 3D Animated Cube using Three.js, Next.js and Framer Motion
มุมมอง 14K10 หลายเดือนก่อน
Build a 3D Animated Cube using Three.js, Next.js and Framer Motion
Build a Smooth Scroll 3D Earth using Three.js, Framer Motion and Next.js
มุมมอง 15K10 หลายเดือนก่อน
Build a Smooth Scroll 3D Earth using Three.js, Framer Motion and Next.js

ความคิดเห็น

  • @ahmedzulfiqar2494
    @ahmedzulfiqar2494 7 ชั่วโมงที่ผ่านมา

    Hey Olivier , Do you have a Portfolio Website?

  • @gabrielveres24
    @gabrielveres24 วันที่ผ่านมา

    First of all thank your for all the amazing content! Can I ask you what CMS are you using for your blog?

  • @thomasfichtner9738
    @thomasfichtner9738 วันที่ผ่านมา

    Hey is there a way to make the animation mode sync. like play exit and enter animation simultaneously

  • @lvan_studio
    @lvan_studio 2 วันที่ผ่านมา

    👏👏👏

  • @paulbrumder7394
    @paulbrumder7394 2 วันที่ผ่านมา

    Hey Olivier, First of all thank you for your incredible work and the inspiration you give! I might like to correct something in your video: const textures = useTexture(projects.map(project => project.src)) As you shouldn't call hooks inside a loop and it may result in an error.

  • @yashsagar734
    @yashsagar734 3 วันที่ผ่านมา

    thanks

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 4 วันที่ผ่านมา

    Thank you so much olivier

  • @NOTHING-en2ue
    @NOTHING-en2ue 4 วันที่ผ่านมา

    great tutorial, thanks man 👍

  • @subproject2771
    @subproject2771 4 วันที่ผ่านมา

    Clean Code, ahahahahha you killed me here

  • @liamrahimian1588
    @liamrahimian1588 4 วันที่ผ่านมา

    Add a route outside your header and the route will stop working because of the transition component.

  • @TheSabatuer
    @TheSabatuer 4 วันที่ผ่านมา

    So what's your preferred method for handling these web animation in smaller viewports? Graceful degradation or Progressive enhancement ?

  • @rayyanep
    @rayyanep 4 วันที่ผ่านมา

    what do we call frontend devs that does animation and interaction like this? is it true that people call them "Creative Developer" ? btw currently learning gsap and framer motion, already a senior web designer for 4 years now.

  • @ksenia-k
    @ksenia-k 5 วันที่ผ่านมา

    Thank you, Oliver!! I'm blushing ^^ Being mentioned among those names (and on this channel!) is a huge honor, really

  • @dvladyko8258
    @dvladyko8258 5 วันที่ผ่านมา

    Hi Olivier! You are my personal inspiration. Love your blog and youtube channel. Can't wait for a new video

  • @otfnk
    @otfnk 5 วันที่ผ่านมา

    Thank you very much, Olivier! 🤝

  • @surendarr2177
    @surendarr2177 5 วันที่ผ่านมา

    Great Insights

  • @r-i-ch
    @r-i-ch 6 วันที่ผ่านมา

    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?

  • @omobrain1707
    @omobrain1707 6 วันที่ผ่านมา

    Man you are greate, I cant thank you enough for making such a tutorials for free to help beginners.

  • @entrinsek9230
    @entrinsek9230 6 วันที่ผ่านมา

    nice , how can i organize all those files to be easy in next js for rendering and other thing in a project ?

  • @r-i-ch
    @r-i-ch 6 วันที่ผ่านมา

    Perhaps Links to other channels/creators sites in Description?

  • @akarshsrivastav2696
    @akarshsrivastav2696 6 วันที่ผ่านมา

  • @nagualdesign
    @nagualdesign 7 วันที่ผ่านมา

    "Projets".

  • @mohsinrahman8391
    @mohsinrahman8391 7 วันที่ผ่านมา

    Love u Content !

  • @MaziyaShaikh
    @MaziyaShaikh 7 วันที่ผ่านมา

    we cannot create this effect using normally js and css is it necessary to use next js?

  • @entrinsek9230
    @entrinsek9230 7 วันที่ผ่านมา

    i love what you are saying same exact what i felt, i was starting using react and tailwind in next js after a long period of chaos, you are wonderful and your content are perfect too see you for more creative tools and projects

  • @krishaynair1980
    @krishaynair1980 7 วันที่ผ่านมา

    Hey, can you share more about your course I am really excited for it. Like what price and when will it launch ?

  • @Mater-code
    @Mater-code 7 วันที่ผ่านมา

    Great vid, remember to hydrate yourself bro.

  • @BeyondTomorrowNow
    @BeyondTomorrowNow 8 วันที่ผ่านมา

    I want to learn how to build websites like these!

  • @mensAmbition
    @mensAmbition 8 วันที่ผ่านมา

    Why you can't make react on animation 😢😢

  • @InekMarcinek
    @InekMarcinek 8 วันที่ผ่านมา

    You speak really well. Did you take some classes on it?

  • @prexverdeflor01
    @prexverdeflor01 8 วันที่ผ่านมา

    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

  • @KristianTheDesigner
    @KristianTheDesigner 8 วันที่ผ่านมา

    finding the right resources is almost harder than learning the actual skill. There are quite a few of these i havent heard of soni will def. check them out. I have the three.js journey course and it truly is amazing. the value you get as a customer from that is unmatched..all updates are free for life, the community you get with it, Bruno answers your questions himself if no one else gets there before him. Yeah, i cannot speak highly enough about that course. And, as some have already mentioned, you are also a great resource, very much a informative channel where there are lots of great insight and info. Looking forward to the course 🙂👍

  • @aazimsheikh279
    @aazimsheikh279 8 วันที่ผ่านมา

    Can you also make the preloader and page transition for this too or any other example?

  • @alltheserobotsshallfall
    @alltheserobotsshallfall 8 วันที่ผ่านมา

    reSources?

  • @ep4r4
    @ep4r4 8 วันที่ผ่านมา

    Uff si inculyes eso se como usar la DevTools con varios ejemplos para ver como esta hecha una animación pues seria SUPEEEER! He buscado recursos parecido de como ver como esta hecho algo y de pana que no hay nada bueno en la web, la enseñanza en muy pero muy vaga.

  • @ep4r4
    @ep4r4 8 วันที่ผ่านมา

    I love CRODROPS

  • @Makigom1
    @Makigom1 9 วันที่ผ่านมา

    Thanks for this analysis, it really gives me courage to believe I'm switching to a right path - my inner engineer is happy of meeting the little artist inside.

  • @Fashion_with_Ashish.
    @Fashion_with_Ashish. 9 วันที่ผ่านมา

    hello bro i saw your video it like god level staff. can u make a video for how destructor website for making animations ? it help a lot

  • @codropsdev
    @codropsdev 9 วันที่ผ่านมา

    Thank you so much for the mention! Very much appreciated 🙏 Big fans here 💙

  • @machnumber
    @machnumber 9 วันที่ผ่านมา

    Personnaly I follow this guy called Olivier Larose... Can I suggest the incredible Wappalyzer (browser addon) ? You can litteraly see what technology a website use, like Lenis, gsap, PHP, anything

  • @honefone
    @honefone 9 วันที่ผ่านมา

    I moved to Europe so I could watch yuri's streams live

  • @akeeb3715
    @akeeb3715 10 วันที่ผ่านมา

    My links were sliding in from the right, then I tried to refer the source code. but that was totally unrelated from except the Button Component. Please provide the source code of this video @Olivier

  • @fortunebolt
    @fortunebolt 10 วันที่ผ่านมา

    This is nice!! Can this be used as a code override in framer?

  • @lilsaintdenzel
    @lilsaintdenzel 10 วันที่ผ่านมา

    💎

  • @timiawoniyi5168
    @timiawoniyi5168 10 วันที่ผ่านมา

    what math does one need to know for these stuffs..... damn

  • @designerjehovah4453
    @designerjehovah4453 10 วันที่ผ่านมา

    Thank you so much for this video. Learnt a lot and the curation websites are a gem. I checked your website and wow it is so incredibly valuable for developers. Again thanks

  • @sadique_x_
    @sadique_x_ 10 วันที่ผ่านมา

    you're too good🙌

  • @jonathanguidi1789
    @jonathanguidi1789 10 วันที่ผ่านมา

    Thanks for the content!

  • @TheManny100ist
    @TheManny100ist 10 วันที่ผ่านมา

    i really love your content man keep it up! i hope one of these days you can go over important math topics to know to be a better creative coder. Thanks!

  • @xwein422
    @xwein422 10 วันที่ผ่านมา

    It's crazy how much value this informations has. Thank you a lot!