Pro-tip: you can also pipe the useTransform value into a useSpring hook to add custom spring physics too your animations as well for some extra flair ✨
Bro your small animation / transition videos are really great. To the point nice easy explanation. Can you make a unique portfolio using multiple of these animations/ transitions. It would be Great
Can you make a video on media queries? Really in depth, about adapting design and animations for mobile devices, basically how you would adapt a page with so much design in it from a 16:9 likely device to a 9:16 device. Thank you man, you are awesome
Very good animation. One thing i would suggest is a bit of zoom on the editor so it is easier to see the code. Seems a bit difficult to read. Fabulous work nevertheless.
Your channel is going to explode, sooner rather than later! I have a question though. When I try to use scrollYProgress I get an object. I need to use useMotionValueEvent to update a state to keep track of the changes of scrollYProgress. Why is my scrollY returning an object, rather than a value?
Because the scrollYProgress is actually a MotionValue, which is an object. To extract the value out of it, you can do a scrollYProgress.get(). See more here: www.framer.com/motion/motionvalue/
Oliiiiii! Dude, this is gold! I'm implementing this (or trying to) for my portfolio but stumbled upon a weird behavior on mobile (chrome, android) where the offset or the start of the stacking is different from desktop (I also checked your example from your blog and it's behaving the same. Any clues what could it be or if there's a way to make it work differently for mobile?
If anyone experiencing the last card to not scale like the others…in the root page you need to set the range to {[i * 0.2 ….not 0.25, this is due to how many cards you use 😊
Legend, the only difficult part is the range, if you guys are using fetching an object that values are always dynamic use range={index * (1 / stateName.length)}
Hello Olivier! Great job, I love your channel, keep it up! I wanted to ask if I can find somewhere a video or source code of one of your demos, specifically "3D perspective scroll". Thanks!!! 🐒
@olivierlarose1 can you show how to do the same thing inside a small container as i tried the same thing but the useScroll does not working properly inside a container with specific height and overflow auto. Also thank you for posting such the video you explained so easily. Thanks for taking the pain to make this and teach.
@@olivierlarose1 yeah i figured out what i needed. So the case was i had a div which has a fixed height and a overflow set to scroll. So to tracks its scroll instead of the entire page we have to pass the ref object as a container parameter instead of a target parameter. The second thing was i wanted to track the scroll position of a item inside this div so to do that we have to pass both the target and container parameter respectively thou i wasn't able to track the element scroll position inside the div (there is a codepen code for that but it did not work in my case). I just used the scroll value and used fixed intervals for the card scale animation. Thank you for your reply and wish you the best. You are awesome man.
I'd rather use Framer Motion when using React because it fits more the ecosystem. React is declarative in it's nature and so is Framer motion. GSAP is imperative so to me it doesn't fit as cleanly with React.
@@olivierlarose1 yes, I dont think either. What I asked is to recreate that same behavior using next 13/14 (app router), framer motion and tailwind (or as I saw in your videos, sass). But having the same behavior of the carousel component of the material design 3 guidelines. Thank you for answering. Your videos are awesome.
it is a css module, it already comes in css, and it works better than in js. Tell me something, I wanted to know if there is a way to make that bounce button just using css @@olivierlarose1
Thank you so much. I have looked for this animation for 2 days and finally I've found it. Your channel is incredible!
Your channel is criminally underrated. With consistency, It will surely reach 1M subscribers.
Haha thanks for the support
u bet
exactly what i needed, criminally underrated channel!!
Appreciate it! Glad I could help
Man, your video was so good. You have been blessed with making people understand things. Definitely replicating it.
Glad it was helpful!
So awesome man! Please keep making such awwwards level tutorials 😭🙏
For sure!
another day another animation simplified. IDK why you are still underrated. Hats off
Cheers! Appreciate the support
Your articulation of the concepts, is amazing bro.
Appreciate it!
Pro-tip: you can also pipe the useTransform value into a useSpring hook to add custom spring physics too your animations as well for some extra flair ✨
can you give an example, please?
100%! You can check it out here I did it for the mouse move: blog.olivierlarose.com/tutorials/3d-float-effect
Awesome!!! Hope you do a page transition tutorial soon.
Yes coming soon!
@@olivierlarose1 Looking forward to that!
Love your explanation. Really simple and understand. 💌
well, i just want to say simply thank you for all videos..
My pleasure
You're literally a magician man!!
Thanks for posting Olivier! Could you make a video on how to deploy next.js with framer motion apps this on Vercel?
Your Explanation just awesome thanks brother
damn, this channel is sick. keep making pls
Bro your small animation / transition videos are really great. To the point nice easy explanation.
Can you make a unique portfolio using multiple of these animations/ transitions. It would be Great
Yes hopefully I’ll make a portfolio, win an awwwards and show everything to you guys
great tutorial, thanks ❤
Need awwwards level tutorials You are the best
Do you mean you want harder stuff?
cool animation, thanks for sharing brother
Can you make a video on media queries? Really in depth, about adapting design and animations for mobile devices, basically how you would adapt a page with so much design in it from a 16:9 likely device to a 9:16 device. Thank you man, you are awesome
For sure! I'll see what I can do
Just Awesome 👍
Very good animation. One thing i would suggest is a bit of zoom on the editor so it is easier to see the code. Seems a bit difficult to read. Fabulous work nevertheless.
Noted! thanks for the feedback
Thanks a lot for another very useful video buddy
Cheers!
Great video!
Your channel is going to explode, sooner rather than later!
I have a question though. When I try to use scrollYProgress I get an object. I need to use useMotionValueEvent to update a state to keep track of the changes of scrollYProgress. Why is my scrollY returning an object, rather than a value?
Because the scrollYProgress is actually a MotionValue, which is an object. To extract the value out of it, you can do a scrollYProgress.get(). See more here: www.framer.com/motion/motionvalue/
Thanks a lot pal
Awesome video🔥🔥🔥
Cheers!
your teaching skill is very good but can u explain a bit slow i have to watch at 0.75x
right on time ! 😁
Cheers
Oliiiiii! Dude, this is gold!
I'm implementing this (or trying to) for my portfolio but stumbled upon a weird behavior on mobile (chrome, android) where the offset or the start of the stacking is different from desktop (I also checked your example from your blog and it's behaving the same. Any clues what could it be or if there's a way to make it work differently for mobile?
If anyone experiencing the last card to not scale like the others…in the root page you need to set the range to {[i * 0.2 ….not 0.25, this is due to how many cards you use 😊
Good catch :)
@@olivierlarose1 good tutorial and good channel 🙂👍
Can you please make the code fonts bigger in next videos
Legend, the only difficult part is the range, if you guys are using fetching an object that values are always dynamic use range={index * (1 / stateName.length)}
Hello Olivier! Great job, I love your channel, keep it up!
I wanted to ask if I can find somewhere a video or source code of one of your demos, specifically "3D perspective scroll". Thanks!!! 🐒
I'll be releasing this animation exclusively in my animation course you can check it out here: blog.olivierlarose.com/courses/web-animation-course
@@olivierlarose1 Allright ! Thanks one more time :)
@olivierlarose1 can you show how to do the same thing inside a small container as i tried the same thing but the useScroll does not working properly inside a container with specific height and overflow auto. Also thank you for posting such the video you explained so easily. Thanks for taking the pain to make this and teach.
You probably need to adjust your offset values if your container is smaller! Not sure tho it depends on your case
@@olivierlarose1 yeah i figured out what i needed. So the case was i had a div which has a fixed height and a overflow set to scroll. So to tracks its scroll instead of the entire page we have to pass the ref object as a container parameter instead of a target parameter. The second thing was i wanted to track the scroll position of a item inside this div so to do that we have to pass both the target and container parameter respectively thou i wasn't able to track the element scroll position inside the div (there is a codepen code for that but it did not work in my case). I just used the scroll value and used fixed intervals for the card scale animation. Thank you for your reply and wish you the best. You are awesome man.
Hey can you make a video about how to make transitions from preloader to the home page
Sure! I’ll see what I can do
nice!!
🔥🔥
As always awesome content but I have a question like why do you use framer motion for animations why not gsap any specific reason for it?
I'd rather use Framer Motion when using React because it fits more the ecosystem. React is declarative in it's nature and so is Framer motion. GSAP is imperative so to me it doesn't fit as cleanly with React.
@@olivierlarose1 OHH OKAY THANKS FOR REPLYING KEEP FORGING TESE TYPE OF VIDEOS SPECIALLY ANIMATIONS ONE
thank you so much... can u make a tutorial on animated gradient background?
Sounds good! I’ll see what I can do
@@olivierlarose1 Thanks Oli❤️
Nice video 😮
Appreciate it!
How to do Sticky Cards on Scroll in figma?
you are amazing...
Thanks!
how to stick the last one mine is not stick the last one please help its importent
or something about Animated Card Gradient Hover
I am really bad at the CSS part in Full stack development. Any tips on how to get better?
Practice makes perfect. Personally what I did was to look at designs that I like on pinterest and then just tried remaking them pixel perfect.
add more 2datas in a data.js the card is not scale properly how to set,
first 4 card perect , i add more two card is not working properly
You have to change the 'range' value of the useTransform to adjust it correctly for more than 4 cards
why does this not work for me ?
It's malfunctioning when we're adding more than 5 items to the stack. @Olivier Larose
The range is hard coded for 5 cards, if you want to change the numbers of cards you’ll have to change that value
@@olivierlarose1 Yes, I did fix it with some trial and errors :)
but why its not responsive
shutup and do it yourself
🔥🔥🔥🔥🔥🔥I want masterize my skill like this
Let’s gooo
can you create the carousel motion of material design 3 in next 14 and framer motion??? I dare you, I think you can't 😅😅😅
I don’t think you need material design for that type of animation
@@olivierlarose1 yes, I dont think either. What I asked is to recreate that same behavior using next 13/14 (app router), framer motion and tailwind (or as I saw in your videos, sass). But having the same behavior of the carousel component of the material design 3 guidelines.
Thank you for answering. Your videos are awesome.
@@ThugLifeModafocah oh I see! The animation of the carousel from material design is very cool indeed. I'll see how I can make something similar
@@olivierlarose1 great great great. Excited to see the result. Thanks a lot.
This is a good tutorial but a bit fast to follow
Noted!
🥰🥰🥰🥰
Do you speak français ?
Oui, de Montreal
yeaaah, great video, have you ever thought about recording one with scroll-driven animation??
What do you mean?
u don't know scroll-driven animations?@@olivierlarose1
Oh is it a css library? Never used before!
it is a css module, it already comes in css, and it works better than in js. Tell me something, I wanted to know if there is a way to make that bounce button just using css @@olivierlarose1
Please sent you an animation/transition on your mail🙏