Olivier Larose
Olivier Larose
  • Видео 49
  • Просмотров 1 010 480
How Difficult Are These Web Animations?! (TIER LIST)
My Web animation Tier List based on diffculty.
0:00 Intro
0:35 Mask Split Text
1:41 Masks
3:12 Pixel Shader
4:59 Stacked Cards
6:55 3D Dom Positioning
8:49 2D Physics
10:18 Videos on scroll
12:21 3D Perspective Gallery
13:36 3D Timeline
15:27 Image Pixel effect
17:10 Infinite Scroll
18:23 Parallel page transition
20:50 Gradients
22:17 Pixel Transition
24:20 Image Gallery with mouse
26:02 Stairs Transition
26:57 Fluid Shader
29:30 Text Scramble
31:06 WebGL Image Gallery
33:01 3D Physics
33:47 Gooey Effect
35:52 Text Gradient
37:00 Outro
More animations: blog.olivierlarose.com/
Follow me on Twitter: olivierlarose_
Follow me in Instagram: olidevs
Discord Channel: disco...
Просмотров: 8 181

Видео

If I Had to Start Over, This is What I'd Do
Просмотров 7 тыс.21 день назад
Find it here: miro.com/app/board/uXjVL9wlpnQ=/?share_link_id=115283197382 My personal roadmap. A breakdown of what I would do if I had to start again. 00:0 Intro 1:42 Figure out who you are 2:37 HTML 3:42 CSS 4:02 Making Layouts 5:30 Javascript 6:16 Choosing a Framework 7:56 Advanced CSS 8:29 Git 8:54 Animation Libraries 9:11 CMS 10:24 Make a Website 12:14 Find an Internship 12:59 Typescript 13...
5 Ways to Make Gradients on the Web
Просмотров 12 тыс.Месяц назад
Here are 5 techniques to make creative gradients on the web. 00:00 Intro 00:18 CSS gradients 00:57 HTML Blops 1:32 Importance of 3D for gradients 1:55 3D Shapes 3:17 Noise gradients 5:22 Vertex deformation 6:27 Outro More animations: blog.olivierlarose.com/ Follow me on Twitter: olivierlarose_ Follow me in Instagram: olidevs Discord Channel: discord.com/invite/2QPNYta...
Top 10 Web Animation Trends of 2024
Просмотров 24 тыс.3 месяца назад
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 More animations: blog.olivierlarose.com/ Follow me on Twitter: olivierlaros...
Why I Freelance and Why You Should Too
Просмотров 5 тыс.4 месяца назад
Those are the reasons why I freelance and why you should too. 0:00 Intro 0:29 Money 2:29 Freedom and Great Future 4:54 Business 7:30 Training Ground 9:29 Networking 11:29 Negotiation Leverage 14:15 Outro More animations: blog.olivierlarose.com/ Follow me on Twitter: olivierlarose_ Follow me in Instagram: olidevs Discord Channel: discord.com/invite/2QPNYtazQq Thanks fo...
My Top 10 Resources for Web Animations
Просмотров 25 тыс.5 месяцев назад
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/ klikkent...
GSAP vs Framer Motion for React
Просмотров 34 тыс.5 месяцев назад
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
Просмотров 114 тыс.6 месяцев назад
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_ Follow me in Instagram: ...
Build a Curved Image using R3F and Framer motion
Просмотров 6 тыс.6 месяцев назад
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
Просмотров 10 тыс.6 месяцев назад
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
Просмотров 11 тыс.7 месяцев назад
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
Просмотров 17 тыс.7 месяцев назад
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
Просмотров 4,9 тыс.7 месяцев назад
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
Просмотров 8 тыс.7 месяцев назад
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_ Follow me in Instagram: instagra...
Build a Wave Distortion Shader using Three.js and React
Просмотров 7 тыс.8 месяцев назад
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
Просмотров 28 тыс.8 месяцев назад
How to Make Page Transitions using Next.js and GSAP
How to use Blend Modes with a Custom Cursor using React and GSAP
Просмотров 7 тыс.9 месяцев назад
How to use Blend Modes with a Custom Cursor using React and GSAP
How to Move a Text on an SVG Path on Scroll using React
Просмотров 7 тыс.9 месяцев назад
How to Move a Text on an SVG Path on Scroll using React
How to Make a 3D Glass Effect using Three.js and Next.js
Просмотров 25 тыс.10 месяцев назад
How to Make a 3D Glass Effect using Three.js and Next.js
This is How I Made a Creative 404 Page
Просмотров 8 тыс.10 месяцев назад
This is How I Made a Creative 404 Page
Reviewing my Subscribers 404 Page
Просмотров 5 тыс.10 месяцев назад
Reviewing my Subscribers 404 Page
How to Make a Zoom Parallax using Next.js and Framer Motion
Просмотров 31 тыс.10 месяцев назад
How to Make a Zoom Parallax using Next.js and Framer Motion
How to Make a Text Gooey Morph Effect using React
Просмотров 6 тыс.11 месяцев назад
How to Make a Text Gooey Morph Effect using React
2 Ways to Make a Scroll Parallax in React
Просмотров 18 тыс.11 месяцев назад
2 Ways to Make a Scroll Parallax in React
This is why you should be a Creative Developer in 2024
Просмотров 9 тыс.11 месяцев назад
This is why you should be a Creative Developer in 2024
I Rebuilt 3 Awwwards Page Transitions using Nextjs and Framer Motion (Page Router)
Просмотров 65 тыс.Год назад
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
Просмотров 23 тыс.Год назад
Build a Text Gradient Opacity on Scroll using Nextjs and Framer Motion
Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js
Просмотров 29 тыс.Год назад
Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js
Rebuild an Awwwards Side Menu with Framer Motion and Nextjs
Просмотров 19 тыс.Год назад
Rebuild an Awwwards Side Menu with Framer Motion and Nextjs
Build a 3D Float Effect using Three.js, Framer Motion, Next.js
Просмотров 8 тыс.Год назад
Build a 3D Float Effect using Three.js, Framer Motion, Next.js

Комментарии

  • @Yassine__G97
    @Yassine__G97 2 часа назад

    great content

  • @fujaielxrahman7352
    @fujaielxrahman7352 3 часа назад

    Hey, bro! You don't know how much your video helped me for a beginner like me. Hope to see more videos from you!

  • @rudrakpatra3331
    @rudrakpatra3331 4 часа назад

    This guy is just scared of Shaders and overrates all shader effects

  • @alandouglas96
    @alandouglas96 5 часов назад

    Here's another comment to support the animations course! 🙏🏻

  • @zzuji
    @zzuji 7 часов назад

    goated individual, goated content 👩‍🍳

  • @herrDOS
    @herrDOS 7 часов назад

    26:57 by the time you fully understand how this code works, it will be out of trend

  • @nickwoodward819
    @nickwoodward819 7 часов назад

    junior *animator* right? not junior FE?

  • @loground
    @loground 8 часов назад

    Great work as always!

  • @yespython123
    @yespython123 9 часов назад

    Looks like I just found my 2025 animation to-do list- thanks again, Oliver!

  • @mariusnogueron
    @mariusnogueron 9 часов назад

    Olivier je savais au fond de moi qui tu parlais français, Guillaume Colombel t'as trahis. Très bonne vidéo

  • @bobaFAT537
    @bobaFAT537 9 часов назад

    Thanks for sharing these amazing websites and your vision!

  • @ecereto
    @ecereto 10 часов назад

    What you call "Parallel page transition" looks a lot like the "View transitions API" that works everywhere but Firefox and is very easy to implement, no need to hijack scroll.

  • @rickdg
    @rickdg 10 часов назад

    Surprised to still see much work invested in effects that almost don’t translate to touchscreens.

  • @raimondszakis8337
    @raimondszakis8337 10 часов назад

    1. wont using framer motions exit animations for components (could be a page) make parallel transitions easy? Like in a sense you make 1 page go out and other come in. 2. I had to do infinite slider where I had multiple instances of them on the page, scrolling odd number scrolls even numbered ones into opposite direction, i found that a huge pain in the ass as if you do not scroll them they are supposed to move on their own in slow pace, and dealing with touch devices was even worse :D

  • @krugu1
    @krugu1 10 часов назад

    A lot of eye candy websites without good fundamental UX. Typical awwwards websites. For me they are closer to a piece of abstract art than a good website for a real client to be honest

  • @TaimoorShahzada
    @TaimoorShahzada 11 часов назад

    Great video Olivier ❤🙏🏻

  • @Alex.Shalda
    @Alex.Shalda 12 часов назад

    Wow, I am amazed … to say the least

  • @smartfridgee
    @smartfridgee 13 часов назад

    Great video, as always. And those balloons at 11:35 lmao.

  • @jarmel3745
    @jarmel3745 13 часов назад

    This is quality content. Thank you!

  • @masterize
    @masterize 13 часов назад

    Great video! How do you handle accessibility for the Mask Split Text animation if you split each word/letter in a span?

  • @yungdigit5183
    @yungdigit5183 13 часов назад

    Hi Olivier, when are you planning to launch your web animation course? Can't wait to buy it! :)

  • @hubbahu
    @hubbahu 13 часов назад

    34:10 for the 3d one id say its more likely to be raymarching with that lighting but other than that guassian blur

  • @adityabansal6272
    @adityabansal6272 14 часов назад

    Next video i want on parallel page transition

  • @jsantos1220
    @jsantos1220 14 часов назад

    ahhaha image that i tried to do a god tier website for my portfolio, three years has pass by, but next month its going to be live finally

  • @theflametr
    @theflametr 14 часов назад

    Could you please make tutorials for those animations. Specially for 3d timeline 😅

  • @pnel
    @pnel 14 часов назад

    It's so useful to establish some sort of standard naming convention for all these effects, thanks a lot (as always) <3

  • @zoistoik
    @zoistoik 14 часов назад

    oh man I really wantedto do the depixelization image effect but I can't figure it out haha do you have a resource I could look at or something to type in google?

  • @esamueljsx
    @esamueljsx 14 часов назад

    Learned a lot. Thanks man ❤❤

  • @shubu5811
    @shubu5811 15 часов назад

    If we are using Nextjs, i would like to know more about project structure for production website with these kind of heavy asset projects, common design patterns , I am a pretty simple guy , I like Designs to be cool but if that comes between performance , Accessibility and Compatibility then we are not making websites for people.

  • @Asyedabdulrahman33
    @Asyedabdulrahman33 16 часов назад

    where did you learning these. if someone knows kindly share

  • @thebasttv1494
    @thebasttv1494 16 часов назад

    Waiting for the course❤

  • @fwdflashwebdesign
    @fwdflashwebdesign 16 часов назад

    Great stuff but the infinite scroll thing dose not deserve and award...common!

    • @esamueljsx
      @esamueljsx 14 часов назад

      Are you fr?? The infinite scroll gallery doesn't?? nahh dawg, you're wrong

  • @AakifAhamed-m3c
    @AakifAhamed-m3c 17 часов назад

    Could you share your roadmap? i am passionate about web development pls :)

  • @zainuldin9095
    @zainuldin9095 17 часов назад

    i was expecting you will teach us how to do all that's why I bring a coffee to follow along😥😥

  • @sujoykrhaldar
    @sujoykrhaldar 17 часов назад

    as you are playing with web animations can you give us a proper roadmap like how should one can start learning animations, in raw js or react or nextjs sc etc. if you are reading this comment , please make a roadmap for javascript animation how one can start and master it just like you. .....

  • @Sodiq_the_Creator
    @Sodiq_the_Creator 17 часов назад

    You said there are many tutorials can you pls share some ?

  • @nightmusic2210
    @nightmusic2210 17 часов назад

    Waiting for the course❤

  • @ssamaddd
    @ssamaddd 17 часов назад

    Waiting for the course❤

  • @rapidbull21
    @rapidbull21 2 дня назад

    Please tell me how to add dynamic links to all the projects on VIEW button. I have added url in all the projects. The problem is that the pointer events of VIEW div is set to none

  • @DenysGerasymenko-k4f
    @DenysGerasymenko-k4f 3 дня назад

    could you please provide link to the sites you showed?

  • @HaNaxHeart
    @HaNaxHeart 7 дней назад

    why is this not app directory

  • @htooaungglwinn
    @htooaungglwinn 7 дней назад

    The most realistic, no BS advice. I am a UX designer transitioning into creative web development so, will definitely apply these tips. I have already created a website through no code tools and then pitched the owner but I still want to put my hands to creative coding. Let's see where I would take myself to.

  • @jssecrets
    @jssecrets 9 дней назад

    Thanks! You have TERRA.glb file. Is it ever used? Couldn't find the reference to it in the project.

  • @LUKEHANZY
    @LUKEHANZY 9 дней назад

    This is the most important thing for me and you have hit the nail on the head, being an artist means you learn code as a byproduct, being an engineer usually the code is the priority and the art is a byproduct, I was always interested in the things I could create with code, not the code itself.

  • @mhhamzaedits
    @mhhamzaedits 10 дней назад

    Love from INDIA

  • @tanyag2487
    @tanyag2487 12 дней назад

    Great work

  • @RKD_24
    @RKD_24 12 дней назад

    Now framer motion becomes motion and you can use it with html

  • @fizanmuhammedfaisal2233
    @fizanmuhammedfaisal2233 13 дней назад

    can you do one for app router

  • @mahadihasan5183
    @mahadihasan5183 14 дней назад

    the same animation made with framer motion would've been help-full for many

  • @mathysbasson1218
    @mathysbasson1218 15 дней назад

    Olivier, I truly never reply on videos, but this was outstanding! Your explanations make all the videos such a fantastic watch and content is of excellent quality! Thank you for making these videos man!