Olivier Larose
Olivier Larose
  • 48
  • 1 004 060
If I Had to Start Over, This is What I'd Do
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:22 Decide who you want to be
14:36 Creative Dev
15:25 Engineering
16:51 Make Websites
19:54 Advanced Section
21:12 The future
22:14 Key takeaways
More animations: blog.olivierlarose.com/
Follow me on Twitter: olivierlarose_
Follow me in Instagram: olidevs
Discord Channel: discord.com/invite/2QPNYtazQq
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #threejs
มุมมอง: 7 154

วีดีโอ

5 Ways to Make Gradients on the Web
มุมมอง 12Kหลายเดือนก่อน
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
มุมมอง 24K3 หลายเดือนก่อน
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
มุมมอง 5K4 หลายเดือนก่อน
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
มุมมอง 25K5 หลายเดือนก่อน
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
มุมมอง 33K5 หลายเดือนก่อน
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
มุมมอง 114K6 หลายเดือนก่อน
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
มุมมอง 6K6 หลายเดือนก่อน
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
มุมมอง 10K6 หลายเดือนก่อน
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
มุมมอง 11K7 หลายเดือนก่อน
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
มุมมอง 17K7 หลายเดือนก่อน
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.9K7 หลายเดือนก่อน
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
มุมมอง 8K7 หลายเดือนก่อน
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
มุมมอง 7K8 หลายเดือนก่อน
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
มุมมอง 28K8 หลายเดือนก่อน
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
มุมมอง 7K9 หลายเดือนก่อน
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
มุมมอง 7K9 หลายเดือนก่อน
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
มุมมอง 25K10 หลายเดือนก่อน
How to Make a 3D Glass Effect using Three.js and Next.js
This is How I Made a Creative 404 Page
มุมมอง 8K10 หลายเดือนก่อน
This is How I Made a Creative 404 Page
Reviewing my Subscribers 404 Page
มุมมอง 5K10 หลายเดือนก่อน
Reviewing my Subscribers 404 Page
How to Make a Zoom Parallax using Next.js and Framer Motion
มุมมอง 31K10 หลายเดือนก่อน
How to Make a Zoom Parallax using Next.js and Framer Motion
How to Make a Text Gooey Morph Effect using React
มุมมอง 6K11 หลายเดือนก่อน
How to Make a Text Gooey Morph Effect using React
2 Ways to Make a Scroll Parallax in React
มุมมอง 18K11 หลายเดือนก่อน
2 Ways to Make a Scroll Parallax in React
This is why you should be a Creative Developer in 2024
มุมมอง 9K11 หลายเดือนก่อน
This is why you should be a Creative Developer in 2024
I Rebuilt 3 Awwwards Page Transitions using Nextjs and Framer Motion (Page Router)
มุมมอง 64Kปีที่แล้ว
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
มุมมอง 23Kปีที่แล้ว
Build a Text Gradient Opacity on Scroll using Nextjs and Framer Motion
Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js
มุมมอง 29Kปีที่แล้ว
Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js
Rebuild an Awwwards Side Menu with Framer Motion and Nextjs
มุมมอง 19Kปีที่แล้ว
Rebuild an Awwwards Side Menu with Framer Motion and Nextjs
Build a 3D Float Effect using Three.js, Framer Motion, Next.js
มุมมอง 8Kปีที่แล้ว
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
มุมมอง 10Kปีที่แล้ว
How to Make an Animated SVG Curve using Next.js, Sine, Linear Interpolation

ความคิดเห็น

  • @rapidbull21
    @rapidbull21 3 ชั่วโมงที่ผ่านมา

    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 วันที่ผ่านมา

    could you please provide link to the sites you showed?

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

    why is this not app directory

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

    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 7 วันที่ผ่านมา

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

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

    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 8 วันที่ผ่านมา

    Love from INDIA

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

    Great work

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

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

  • @fizanmuhammedfaisal2233
    @fizanmuhammedfaisal2233 11 วันที่ผ่านมา

    can you do one for app router

  • @mahadihasan5183
    @mahadihasan5183 12 วันที่ผ่านมา

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

  • @mathysbasson1218
    @mathysbasson1218 13 วันที่ผ่านมา

    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!

  • @fukuda-c2l
    @fukuda-c2l 14 วันที่ผ่านมา

    concisely enough for me.

  • @rasleica
    @rasleica 14 วันที่ผ่านมา

    yooo this is a great content! Thank you!!🙇🏻‍♀

  • @Erickdsgn
    @Erickdsgn 14 วันที่ผ่านมา

    If people follow this path nowadays they are screwed. Any mention of AI... now it should be right with your first code learning step and also into artistic side.

  • @dmytro_bhn
    @dmytro_bhn 15 วันที่ผ่านมา

    Thank you very much. I began to understand a little what I like more.

  • @clashaccount2166
    @clashaccount2166 15 วันที่ผ่านมา

    Nice, very comprehensive.

  • @brittonwalker7341
    @brittonwalker7341 16 วันที่ผ่านมา

    You make it sound like react is a replacement for Wordpress while I use react with Wordpress all of the time, in fact their whole editor is built in react so you can build custom block components to display on the Frontend, with or without react.

  • @nellymotion
    @nellymotion 16 วันที่ผ่านมา

    banger!

  • @amazingeffects200
    @amazingeffects200 17 วันที่ผ่านมา

    I have 1 year exp but I still not getting any client 😮

  • @burhanUpad
    @burhanUpad 17 วันที่ผ่านมา

    Subscribed ❤

  • @ZamanRamazani
    @ZamanRamazani 18 วันที่ผ่านมา

    Thank you Olivier

  • @sleeplessinde1551
    @sleeplessinde1551 18 วันที่ผ่านมา

    Great Content! Thank you a lot! I rarely comment on someone's video but you made a very good video and it came to me at the right time.

  • @marinerose74
    @marinerose74 19 วันที่ผ่านมา

    I see you use frameworks as React and Next js a lot, do you think it's very important to use these frameworks to do awesome animations?

    • @olivierlarose1
      @olivierlarose1 18 วันที่ผ่านมา

      No you don’t necessarily need to use those frameworks, you could use vanilla Javascript and make the same animations. However I’d argue that React has a nice DX and community that indirectly helps with animations.

  • @marinerose74
    @marinerose74 19 วันที่ผ่านมา

    I like your channel very much, I just discovered it :)

  • @rafmdev
    @rafmdev 19 วันที่ผ่านมา

    Amazing tutorial! 👏

  • @Mati123562
    @Mati123562 19 วันที่ผ่านมา

    Pure cinema 🚬

  • @IrlanFreitasjr
    @IrlanFreitasjr 19 วันที่ผ่านมา

    Hey Olivier, could you help me, what's the shortcut to can see the height and witdh to selected area, liked u did in 27:57, thanks

    • @fizanmuhammedfaisal2233
      @fizanmuhammedfaisal2233 12 วันที่ผ่านมา

      it is something available on mac os basically for screenshot --> cmd+shift+4

  • @Aulivur
    @Aulivur 19 วันที่ผ่านมา

    Show us the plant website haha

  • @Ninuzdotco
    @Ninuzdotco 19 วันที่ผ่านมา

    Love to see Astro in there, people are sleeping too much on it. Also want to mention that with astro you can still use react inside of it for those that don’t know, so it’s a good choice

  • @hani4239
    @hani4239 19 วันที่ผ่านมา

    you're underrated brother

  • @នីន-ស7ដ
    @នីន-ស7ដ 19 วันที่ผ่านมา

    Finally I’m not alone. Thanks for your sharing ❤

  • @Schubzonaut
    @Schubzonaut 19 วันที่ผ่านมา

    First of all, I really appreciate your work and the effort you put into your videos! They’re incredibly inspiring, and I’ve learned a lot from them. 😊 However, I’ve run into an issue with the transition implementation shown in this video. Specifically, when using scrollTo(0, 0) to reset the scroll position, the new page content becomes visible while the page is still scrolling up. This creates a noticeable lag and makes the transition feel unsynchronized. It seems that this behavior happens because scrollTo in JavaScript is likely executed after the page renders, which makes it slower compared to the native scroll behavior built into Next.js Link components (like when scroll={true}). The native behavior resets the scroll position almost instantaneously, Unfortunately, this behavior seems to be different now compared to how it worked in your video. Do you have any suggestions on how to address or work around this issue? Perhaps there’s a trick to better synchronize scrollTo or optimize its behavior? Thank you in advance, and once again, big compliments for your content! 🙌

    • @olivierlarose1
      @olivierlarose1 19 วันที่ผ่านมา

      hard to tell without seeing your code, but I would take a look at the onExitComplete event of AnimatePresence: motion.dev/docs/react-animate-presence#onexitcomplete and the next.js router events: nextjs.org/docs/pages/api-reference/functions/use-router#routerevents

  • @johnnathan2794
    @johnnathan2794 19 วันที่ผ่านมา

    Thank you for this bro!

  • @al11_o
    @al11_o 19 วันที่ผ่านมา

    ily.

  • @nosignal5908
    @nosignal5908 19 วันที่ผ่านมา

    Make a video about responsive website, like how to make them.

  • @Sonu-wg3os
    @Sonu-wg3os 20 วันที่ผ่านมา

    "Can you handle more Views ?" Hey Olivier , Did you know Your Content has a potential to reach 476 million more views? Yes that's India's Population where you're content is going to reach. Would You be open to the Idea of Having a quick meet to discuss how ? I'll Show you How's that Possible.

  • @baydiary
    @baydiary 20 วันที่ผ่านมา

    absolute gold, thanks for sharing!

  • @artfactory4529
    @artfactory4529 21 วันที่ผ่านมา

    Great work, thanks for sharing Olivier

  • @rusdiahamid
    @rusdiahamid 21 วันที่ผ่านมา

    So inspiring ✨

  • @bobh4686
    @bobh4686 21 วันที่ผ่านมา

    One huge big gaping hole in your roadmap: conversions. Not surprising though coming from an 'artistic' developer :)

    • @olivierlarose1
      @olivierlarose1 21 วันที่ผ่านมา

      Yep thats some back end stuff right there

    • @bobh4686
      @bobh4686 21 วันที่ผ่านมา

      @ nah, it’s planning, strategy and analysis. Huge ROI impact, but absent in ‘creative’ projects.

    • @fried920
      @fried920 18 วันที่ผ่านมา

      Could you elaborate please?

  • @Omohagbon
    @Omohagbon 21 วันที่ผ่านมา

    Bro, I considered using JavaScript for the front end and typeScript for the back end. What do you think?

    • @olivierlarose1
      @olivierlarose1 21 วันที่ผ่านมา

      Typescript for both, but I agree that typescript is more of a must for back end

  • @leanprogrammer
    @leanprogrammer 21 วันที่ผ่านมา

    Great rebuild indeed 😀Full courses on rebuilds like this with explanations would be a no brainer

  • @KauriMusic
    @KauriMusic 21 วันที่ผ่านมา

    creative development content is such an untapped niche, keep it up

  • @yamix-tr
    @yamix-tr 21 วันที่ผ่านมา

    just in the right time 😄

  • @shaked1233
    @shaked1233 22 วันที่ผ่านมา

    great video been waiting for that, astro is great and can also be utilized with react

  • @Mubashar783
    @Mubashar783 22 วันที่ผ่านมา

    5:38 why are you not sure even you have mich experience 😢

  • @Mubashar783
    @Mubashar783 22 วันที่ผ่านมา

    Bro really we belive on your rm and start learning is this industry level ?

  • @Mubashar783
    @Mubashar783 22 วันที่ผ่านมา

    3:44 You are not sure for your own rm then why do we expect to learn webdev from your rm that takes an year.

  • @hello_dim
    @hello_dim 22 วันที่ผ่านมา

    Great guide! Thanks