I can't express enough how amazing your content is, brother. I truly appreciate the demos and tutorials you've shared. As a junior frontend developer with a passion for animations and smooth transitions, your channel has been the most insightful and valuable resource I've come across. Thank you so much, brother!
@@imzyren yes, and this is problem because most of people now doing purchases on mobiles. So, all these cool animations are mostly for other devs which will do video, add for making featured sites, not real, etc
great video! I don't know if it's just me, but lately, let's say in the last 3/4 months, I had the impression that many people are trying to learn three.js and similar libraries, I guess the web is evolving on that path too
Great content as always Olivier! I've been lately working on 3D, it really another world, these past 2 weeks I think I've been entirely working just on Blender, not even touching threejs, but it is really cool and I am really close to implement this in my portfolio.
great video! two things: 1. isn't the sticky part of the name sticky footer redundant? 2. what is the line mask? i couldn't grasp what the animation looked like in the footage you showed. keep the great content coming 👑👑
1. Sticky footer in the sense that the footer is “fixed” to the page when you’re scrolling. 2. Line mask is an animation where each line of a paragraph is masked and then animated from that mask Hope that makes sense!
You gotta learn framer motion or gsap first, if you are using react then framer motion is recommended, start with small animations, maybe watch older videos from this channel, and if you'll stay consistent, you'll be able to create these kind of animations.
broo i have the biggest question if you just dont have any idea what to make you know how to make it but dont know what to make what to add as data what kind of animation and transitions effects what what looks good like it does not come in you mind 0 creativity or thinking capability after writing html you dont know what to add plzz tell this problem answer how to fix it
Cool websites, you are inspiring… hope one day I can create something like these, please let me know from where I should start to learn. or if you can make a video on this topic😊❤
and one another can you just provide all the website links like what you showed it would be really helpfull to check and reimplement them or at least try
Hey Olivier , really nice video ! I was wondering if I could help you with more Quality Editing in your videos and also make a highly engaging Thumbnail and also help you with the overall youtube strategy and growth ! Pls let me know what do you think ?
SOGAI mentioned 🗣🗣 Awesome video as always Oli, loved this one man!
Really exciting to see how web animation trends keep evolving from here
Cant wait any longer for your course to come out!!!!!
I can't express enough how amazing your content is, brother. I truly appreciate the demos and tutorials you've shared. As a junior frontend developer with a passion for animations and smooth transitions, your channel has been the most insightful and valuable resource I've come across. Thank you so much, brother!
Problem with these kind of animations is that mostly users will not see them as they are not working on mobiles.
They aren't supposed to work on mobile. Because they'll just become annoying.
@@imzyren yes, and this is problem because most of people now doing purchases on mobiles. So, all these cool animations are mostly for other devs which will do video, add for making featured sites, not real, etc
great video! I don't know if it's just me, but lately, let's say in the last 3/4 months, I had the impression that many people are trying to learn three.js and similar libraries, I guess the web is evolving on that path too
Hi! Love your stuff. I noticed that your screen captures are super smooth, what do you use to record your screen without lag?
Now we need a tutorial on each animation on framer ❤
Love the video. Can you please let me know some resources with structured curriculum (paid or free) to learn these modern animations?
1st one was super cool and totally different i never seen. 2nd one 😲. Thank you for sharing this side ❤
Thank u for ur professional opinion!
It was very useful and helpful
Great content as always Olivier! I've been lately working on 3D, it really another world, these past 2 weeks I think I've been entirely working just on Blender, not even touching threejs, but it is really cool and I am really close to implement this in my portfolio.
These websites are really amazing, inspiring as well as hard to create.
Thankfully Oli!
Another example of a footer is Red Barrel's website 🔥
great video! two things:
1. isn't the sticky part of the name sticky footer redundant?
2. what is the line mask? i couldn't grasp what the animation looked like in the footage you showed.
keep the great content coming 👑👑
1. Sticky footer in the sense that the footer is “fixed” to the page when you’re scrolling.
2. Line mask is an animation where each line of a paragraph is masked and then animated from that mask
Hope that makes sense!
great video ser!
Hi Oli, Please post another tutorial video... Like website startup animation ❤
Great video! Do you have any page transition workaround/ alternative for nextjs using app router?
Can you make a video on how to do the contact form of the TUX website?
Can you make tutorial on all of these animations pleaseee!
Wow !!
How i create these types of animation.
Any guide/ tutorial
You gotta learn framer motion or gsap first, if you are using react then framer motion is recommended, start with small animations, maybe watch older videos from this channel, and if you'll stay consistent, you'll be able to create these kind of animations.
we need a tutorial on 3D timeline :O
wonder how the website will optimized in mobile version 👀
Hi, can you tell where we can make this animation.
where do you find all these pages?
very useful information
What's the web i. 0:30?
Can you make Botonix's site text shuffle animation
broo i have the biggest question if you just dont have any idea what to make you know how to make it but dont know what to make what to add as data what kind of animation and transitions effects what what looks good like it does not come in you mind 0 creativity or thinking capability after writing html you dont know what to add
plzz tell this problem answer how to fix it
how we can do these?
need a tutorial for masks with nextjs
web animation course when?😢
Cool websites, you are inspiring… hope one day I can create something like these, please let me know from where I should start to learn. or if you can make a video on this topic😊❤
How you create
I would love to see you code some of this. what u think??
plz plz teach us how these animations made
and one another can you just provide all the website links like what you showed it would be really helpfull to check and reimplement them or at least try
Here's the list I used to make the video:
Masks
- zentry.com/
- www.accordion.net.au/
- mooders.net/en/works/
- play.makemepulse.com/
- www.zetr.com.au/range
- ashfall.studio/
- decathlon-wlkr76.index.studio/
- canvascreative.co/
- askphill.com/pages/about
- masaigon.space/en
Pixel transitions
- revenant.tv/journal/
- www.synthetictheatre.com/archive
- inkfishnyc.com/contact
- nordquantique.ca/en
- clarissemichard.com/
Pannel transition
- betteroff.studio/
- stewartpartners.studio
- www.zetr.com.au/stories
- doze.studio
- und-ny.com/about/
- ashfall.studio/work
- arocksworld.com/story
- anaiwood.com/en/company
Split text
- betteroff.studio/feed
- www.jordangilroy.com/#work
- stewartpartners.studio
- non-linear.studio/
- www.significo.com/
- www.vntnr.co/
Fixed image
- ranlus.fr/
- www.jordangilroy.com/#archive
- yourmajesty.co/expertise
- betteroff.studio/
- www.zetr.com.au/
- www.defprojetos.com/
- und-ny.com/
- www.sogaiart.com/
- www.intrepidautomation.com/technologies/
3d timelines
- www.igloo.inc/
- www.botanicexpo.com/
- www.girard-perregaux.com/casquette-collection/
- view-source-cumulus.myshopify.com/
- ashfall.studio/lab
- labs.noomoagency.com/
- spaace.io/
- a-chen.webflow.io/
- www.cartier.com/en-fr/watchesandwonders
- kzero.com/
Text based project gallery
- populous.com
- studio-size.com/
- opos.buzzworthystudio.com/directors
- zentry.com/
- doze.studio/
- thevariable.com/
Webgl image gallery
- jobenetuk.dev/
- www.steviaplease.me/
- sparkk.fr/en
- rxkstudio.com/lowlyland
- aexlab.com/
- www.oshanehoward.com/work-categories/motion
- www.relyonkaide.com/
- aircord.co.jp/en/projects/
Sticky footer
- doze.studio/
- www.planeterthos.com/
- www.hevahealth.com/
- www.zaptec.com/
- www.sonarmusic.com.au/work
- www.zaptec.com/
- sparkk.fr/en/digital-web-agency
- anaiwood.com/en
- www.widelab.co/
Text line mask
- www.justgowiththeflow.com/services
- format-3.co/
@@olivierlarose1OP delivers!!!
@@olivierlarose1 thx really appreciated 👍 i copied every link 🖇️
list all the websites here i wanna visit them all and learn.
thanks
Hey Olivier , really nice video ! I was wondering if I could help you with more Quality Editing in your videos and also make a highly engaging Thumbnail and also help you with the overall youtube strategy and growth ! Pls let me know what do you think ?
Can anyone give me some courses to make websites like this?
Can you make mouse trail video in next js
Anyone has a list of the sites used? Would love to see them credited.
Here's the list I used to make this video:
Masks
- zentry.com/
- www.accordion.net.au/
- mooders.net/en/works/
- play.makemepulse.com/
- www.zetr.com.au/range
- ashfall.studio/
- decathlon-wlkr76.index.studio/
- canvascreative.co/
- askphill.com/pages/about
- masaigon.space/en
Pixel transitions
- revenant.tv/journal/
- www.synthetictheatre.com/archive
- inkfishnyc.com/contact
- nordquantique.ca/en
- clarissemichard.com/
Pannel transition
- betteroff.studio/
- stewartpartners.studio
- www.zetr.com.au/stories
- doze.studio
- und-ny.com/about/
- ashfall.studio/work
- arocksworld.com/story
- anaiwood.com/en/company
Split text
- betteroff.studio/feed
- www.jordangilroy.com/#work
- stewartpartners.studio
- non-linear.studio/
- www.significo.com/
- www.vntnr.co/
Fixed image
- ranlus.fr/
- www.jordangilroy.com/#archive
- yourmajesty.co/expertise
- betteroff.studio/
- www.zetr.com.au/
- www.defprojetos.com/
- und-ny.com/
- www.sogaiart.com/
- www.intrepidautomation.com/technologies/
3d timelines
- www.igloo.inc/
- www.botanicexpo.com/
- www.girard-perregaux.com/casquette-collection/
- view-source-cumulus.myshopify.com/
- ashfall.studio/lab
- labs.noomoagency.com/
- spaace.io/
- a-chen.webflow.io/
- www.cartier.com/en-fr/watchesandwonders
- kzero.com/
Text based project gallery
- populous.com
- studio-size.com/
- opos.buzzworthystudio.com/directors
- zentry.com/
- doze.studio/
- thevariable.com/
Webgl image gallery
- jobenetuk.dev/
- www.steviaplease.me/
- sparkk.fr/en
- rxkstudio.com/lowlyland
- aexlab.com/
- www.oshanehoward.com/work-categories/motion
- www.relyonkaide.com/
- aircord.co.jp/en/projects/
Sticky footer
- doze.studio/
- www.planeterthos.com/
- www.hevahealth.com/
- www.zaptec.com/
- www.sonarmusic.com.au/work
- www.zaptec.com/
- sparkk.fr/en/digital-web-agency
- anaiwood.com/en
- www.widelab.co/
Text line mask
- www.justgowiththeflow.com/services
- format-3.co/
@@olivierlarose1 Awesome! That is perfect!
I think its super annoying and doesnt do the job
Anyone here uses Webflow?
We are cooder 🔥🔥
I use webflow@@manishfe
@@manishfe YES, so you dont?
@@manishfe which library can help create such animations?
no
wooow bro that sooo inspiring thanks
A lot of these use gsap. Not worth it since most users are on phones and its not good for performance
3D perspective scroll tutorial when? do we really need to pay for a course???