- 48
- 1 004 060
Olivier Larose
Canada
เข้าร่วมเมื่อ 1 ม.ค. 2019
Hey there👋
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
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
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
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
could you please provide link to the sites you showed?
why is this not app directory
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.
Thanks! You have TERRA.glb file. Is it ever used? Couldn't find the reference to it in the project.
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.
Love from INDIA
Great work
Now framer motion becomes motion and you can use it with html
can you do one for app router
the same animation made with framer motion would've been help-full for many
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!
concisely enough for me.
yooo this is a great content! Thank you!!🙇🏻♀
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.
Thank you very much. I began to understand a little what I like more.
Nice, very comprehensive.
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.
banger!
I have 1 year exp but I still not getting any client 😮
Subscribed ❤
Thank you Olivier
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.
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?
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.
I like your channel very much, I just discovered it :)
Amazing tutorial! 👏
Pure cinema 🚬
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
it is something available on mac os basically for screenshot --> cmd+shift+4
Show us the plant website haha
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
you're underrated brother
Finally I’m not alone. Thanks for your sharing ❤
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! 🙌
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
Thank you for this bro!
ily.
Make a video about responsive website, like how to make them.
"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.
absolute gold, thanks for sharing!
Great work, thanks for sharing Olivier
So inspiring ✨
One huge big gaping hole in your roadmap: conversions. Not surprising though coming from an 'artistic' developer :)
Yep thats some back end stuff right there
@ nah, it’s planning, strategy and analysis. Huge ROI impact, but absent in ‘creative’ projects.
Could you elaborate please?
Bro, I considered using JavaScript for the front end and typeScript for the back end. What do you think?
Typescript for both, but I agree that typescript is more of a must for back end
Great rebuild indeed 😀Full courses on rebuilds like this with explanations would be a no brainer
creative development content is such an untapped niche, keep it up
just in the right time 😄
great video been waiting for that, astro is great and can also be utilized with react
5:38 why are you not sure even you have mich experience 😢
Bro really we belive on your rm and start learning is this industry level ?
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.
Great guide! Thanks