thank you, good animation tutorial. you can use "state && something" instead of using "state ? something : null". so if the state is false null won't be rendered.
I’m curious about your choice to place the AnimatePresence component inside the ternary expression, and why you opted for an empty AnimatePresence in the else condition, rather than embedding the ternary expression within a single AnimatePresence.
That's quality stuff. Thank you so much. I'm not sure, but I think a cleaner way to solve the issue at 27:35 is to code it like this: state && .... instead of using the ternary operator
Great video, more FramerMotion + React videos please! Better yet, maybe a bootcamp style series where you go through all the basics + intermediary stuff? Would gladly pay for that bootcamp too.
I haven't gone through the tutorial yet. First, thank you for making these types of vids. Second, what is your opinion on Framer Motion vs GSAP with React? Seems like Framer is awesome but not much of a community where as GSAP has a great community but not so much when it comes to using it with react hooks. Thanks again!
I agree with you, honestly I think the team at Framer is all about making animations easy with react and while GSAP is much more widely used it doesn't integrate with react all that well when compared with framer motion. I love both libraries but I would say that using framer motion with react is a lot smoother/easier.
Damn, the possibilities that Framer Motion gives. Very nice tutorial. I have one question though, can you put relative values like percentages or even a variable instead of pixels on the drag constraints?
That is a great question. I remember trying initial and having it not work correctly. I'll have to go back and try a work around. I'm going to set up a codesandbox for this and see if we can find a solution.
Very Good tutorial. The only thing i can complain on is that you could have explained motionvalue and usespring a little bit more. Im hoping you can do more tutorials on framer-motion in the future with new cool animations to replicate
Thanks for the comment. I'm wanting to do a complete framer motion guide in the future. But framer has awesome documentation here. www.framer.com/api/motion/motionvalue/ that may explain it a bit better :)
Hi Akram great video like always, my only concern is that since background is positioned fixed, how would the user click button and stuff? Is there an alternative way to use that background?
I checked a couple options a I think the easiest solution would be adapting its style based on the state, and change the rendering state to a lower range, maybe -70 , -80 instead of -100, as it will allow to render the background before the animations starts. Also, remove the background css related to this new values.
If you made a course about web design and animations similar to these videos. I would easily give you my whole bank account. This is exactly the type of web design work I want to do!!!!
hahahah, A course is expected to come soon. I can promise you it want be your whole bank account. I plan to release courses at a very affordable price.
You are so good, amazing 1 more sub, and lot of likes, i think animations are what make modern applications excellent, just look at apple's products, the finesse in the animations is just crazy
Hi Akram, thanks for the amazing content. Idea: a form with interactive validation would be a great tutorial! NextJS with Framer Motion please :) Thank you!
I don't understand the difference between useMotionValue() and useSpring() Also what's the difference between *onChange(() => x.get() > -100* And *onChange(latest => latest > -100)*
Thank you very much fo the video. I tried to produce this animation and run into a problem with useSpring. The code works fine with useMotionValue but when using useSpring the drag seem to get out of control... Also I couldn't add the easing in your code because it gives me an error of "the ease array must be of length input.length-1." Here is the code: codesandbox.io/s/framer-enlarge-mmkqe?file=/src/App.js I'd appreciate your help.
You can use imageContainer.scrollIntoView({ behavior: smooth | auto; block: start | center | end | nearest; inline: start | center | end | nearest; }); top bring the selected html element into center of the viewport.
Hi! Thanks for this tutorial! I'm trying to make the progress bar using percentage instead of absolute value, I have modified my width variable to "const width = useTransform(x, [-1060, 0], [90, 0]);" but I don't know how to input it in the style attribute of the "product-drag-progress" div, framer motion accept vh, vw and % values formatted in strings, so I need to pass something like "90%" to the width property, I've tried to do so with a template litteral -> style={{ width: `"${width}%"` }} I don't get any error but nothing happens, do you have any idea why? I'm surely doing something really dumb lol
I hear ya. I was facing the same issue early on. I'll have to go back and try a work around. I'm going to set up a codesandbox for this and see if we can find a solution.
@@WrongAkram I found the solution, there was an error in my template litteral, in order to get the value of my width variable I should have done : `"${Math.floor(width.current)}%"` After this my values were right but for some reason, the animation didn't worked either. The solution is actually a lot simpler : const width = useTransform(x, [0, -1060], ["0%", "90%"]); useTransform can convert a linear serie of numbers into numbers, colors, shadows, strings, etc Every value in the output range must be of the same type and in the same format, really convenient :)
Since this was a small project I figured that using cra would be better because it will be easily transmittable to next.js or gatsby.js. Seems like the next awwwards series should be in gatsby huh?
@@WrongAkram Love the video , really appreciate the effort put in and your experience. If you are doing a GatsbyJS maybe introduce some good patterns on abstraction . Doing my first project in react/gatsbyjs and found so little on the www .Thanks to you i'm planning to introduce some framer motion. Thank you && stay safe
Thanks for your tutorials they are really cool Could you help please what about this apples web pages like www.apple.com/ipad-pro/ They use some mask/flow images. It looks really cool but I can't understand the logic and technology
Not sure how you came across this example but so glad you did, couldn't have picked a better way to explain this.
started using framer motion this year and i love it.more framer motion tutorials please!! ;-)
Finally, a tutorial on Framer Motion that make sense.
Thank you !
Glad it was helpful!
dont know why this channel has only 2k subs, anyhow nice work bro - thanks
Really nice. I would like to see more page transitions, that’s really cool.
Thanks for the video
thank you, good animation tutorial. you can use "state && something" instead of using "state ? something : null". so if the state is false null won't be rendered.
True! That’s a really great point :)
thanks so much , was reading the docs as I was watching. very cool stuffz
Great quality content bro, no need to say I instantly subscribed. Keep it up!
That awesome to hear! Glad you enjoyed it :)
I’m curious about your choice to place the AnimatePresence component inside the ternary expression, and why you opted for an empty AnimatePresence in the else condition, rather than embedding the ternary expression within a single AnimatePresence.
I was literally learning framer motion today thank you!
Perfect timing huh?
That's quality stuff. Thank you so much.
I'm not sure, but I think a cleaner way to solve the issue at 27:35 is to code it like this:
state && ....
instead of using the ternary operator
mhmmm.... thats true will have to give it a shot. Thanks!
love your tutorial .we need more this kind of animation stuff
I'll need to rewatch this,
high quality content as always. Looking forward for more framer motion videos.
Thanks! Framer Motion is awesome.
Hi Akram thanks for another jewel material 👍🏻
Glad you liked it!
this is just straight up amazing
Appreciate you :)
Amazing content! You deserve more views and subscribers
Great video, more FramerMotion + React videos please! Better yet, maybe a bootcamp style series where you go through all the basics + intermediary stuff? Would gladly pay for that bootcamp too.
Mhmmm.. maybe. I like sticking with the format of us learning by building cool things rather than following the docs.
Yeaaaaaa I been starving for your content. In glad ur back at it again in RUclips screne. #1 fan😁😁😁🤗🤗🤗
My guys 💪🏽
Damn you really are his #1 fan, that's some dedication lmao
I'm glad that I discovered your channel ! true inspiration right there ! keep it up !
Thanks man! Glad you enjoyed it.
Thank you, great tutorial dudes. Love it 👍🏻
when you do this project, did you ask the designer for the assets?
Glad you loved it! I didn't, I was able to grab images from their website and everything else was css.
Woww!! Such an amazing work!
Hey man I hope you are doing well amidst this global pandemic just dropping in to say like always you make superb content. Stay safe.
Thanks for the kind words! Hope you and your loved ones stay safe also!
I haven't gone through the tutorial yet. First, thank you for making these types of vids. Second, what is your opinion on Framer Motion vs GSAP with React? Seems like Framer is awesome but not much of a community where as GSAP has a great community but not so much when it comes to using it with react hooks. Thanks again!
I agree with you, honestly I think the team at Framer is all about making animations easy with react and while GSAP is much more widely used it doesn't integrate with react all that well when compared with framer motion. I love both libraries but I would say that using framer motion with react is a lot smoother/easier.
This is a good tutorial for advanced framer-motion.
I have n’t used the framerX I bought last year. 😂😂
lol I want to start using framer X a lot more also it looks really cool!
Framer and react working fine, cool videos ;)
Thanks mate, great tutorial!
😁👏👏
Damn, the possibilities that Framer Motion gives. Very nice tutorial. I have one question though, can you put relative values like percentages or even a variable instead of pixels on the drag constraints?
That is a great question. I remember trying initial and having it not work correctly. I'll have to go back and try a work around. I'm going to set up a codesandbox for this and see if we can find a solution.
Thank you for making this type of content. You are the best!!!
0:10 into the video and I liked it already
Appreciate you man!
Wow. The content you put out is so super helpful. Thank you!!!
Glad you enjoyed it!
Just what I looking for. Thank you
Glad I could help!
Very Good tutorial. The only thing i can complain on is that you could have explained motionvalue and usespring a little bit more. Im hoping you can do more tutorials on framer-motion in the future with new cool animations to replicate
Thanks for the comment. I'm wanting to do a complete framer motion guide in the future. But framer has awesome documentation here. www.framer.com/api/motion/motionvalue/ that may explain it a bit better :)
Hi Akram great video like always, my only concern is that since background is positioned fixed, how would the user click button and stuff? Is there an alternative way to use that background?
Mhmm.. Not sure what you mean
I checked a couple options a I think the easiest solution would be adapting its style based on the state, and change the rendering state to a lower range, maybe -70 , -80 instead of -100, as it will allow to render the background before the animations starts.
Also, remove the background css related to this new values.
Grate stuff! I think you could use setState(someting > x) instead of someting > x ? SetState(true) : setState(false)
I have seen all of your videos and they are really great, please do tutorials on react route transitions and scroll based revealing animation 🙇
Thanks for the idea! Really happy you are enjoying my videos :)
hey loved the tutorial but can you just increase the font next time you do a tutorial ! please !!
If you made a course about web design and animations similar to these videos. I would easily give you my whole bank account. This is exactly the type of web design work I want to do!!!!
hahahah, A course is expected to come soon. I can promise you it want be your whole bank account. I plan to release courses at a very affordable price.
@@WrongAkram Thank you! I already have a budget out aside. Absolutely love your work.
You are so good, amazing 1 more sub, and lot of likes, i think animations are what make modern applications excellent, just look at apple's products, the finesse in the animations is just crazy
Hi Akram, thanks for the amazing content. Idea: a form with interactive validation would be a great tutorial! NextJS with Framer Motion please :) Thank you!
That would be pretty cool, will keep it in mind :)
JS Animation king 👍
Maybe a stupid question. But how can I now embedd this in my framer website?
You deserve more subs
Would you consider making introduction videos of certain technologies before diving into a project.
That is a great idea. Ill make sure to emphasize this in my next video!
I don't understand the difference between useMotionValue() and useSpring()
Also what's the difference between
*onChange(() => x.get() > -100*
And
*onChange(latest => latest > -100)*
Greatest tuts ever! Thank you :)
My man! Thank you so much :)
Hi, where can i find the original website or a live demo of this ?
Right here: www.sifive.com/boards/hifive1
wao Excellent
Dude this was legit
Thank you very much fo the video. I tried to produce this animation and run into a problem with useSpring. The code works fine with useMotionValue but when using useSpring the drag seem to get out of control... Also I couldn't add the easing in your code because it gives me an error of "the ease array must be of length input.length-1." Here is the code: codesandbox.io/s/framer-enlarge-mmkqe?file=/src/App.js
I'd appreciate your help.
Try use useMotionValue instead of useSpring.
Has anyone been able to center the draggable 'product-image' ? If yes then how are you implementing it?
Amazing
You can use imageContainer.scrollIntoView({
behavior: smooth | auto;
block: start | center | end | nearest;
inline: start | center | end | nearest;
});
top bring the selected html element into center of the viewport.
mhmm.... Ill have to look into this :)
@@WrongAkram Hey! :) Any updates on the solution to this bug, I'm trying to find a good way to handle it.
love it
Hi! Thanks for this tutorial! I'm trying to make the progress bar using percentage instead of absolute value, I have modified my width variable to "const width = useTransform(x, [-1060, 0], [90, 0]);" but I don't know how to input it in the style attribute of the "product-drag-progress" div, framer motion accept vh, vw and % values formatted in strings, so I need to pass something like "90%" to the width property, I've tried to do so with a template litteral -> style={{ width: `"${width}%"` }} I don't get any error but nothing happens, do you have any idea why? I'm surely doing something really dumb lol
I hear ya. I was facing the same issue early on. I'll have to go back and try a work around. I'm going to set up a codesandbox for this and see if we can find a solution.
@@WrongAkram I found the solution, there was an error in my template litteral, in order to get the value of my width variable I should have done :
`"${Math.floor(width.current)}%"`
After this my values were right but for some reason, the animation didn't worked either. The solution is actually a lot simpler :
const width = useTransform(x, [0, -1060], ["0%", "90%"]);
useTransform can convert a linear serie of numbers into numbers, colors, shadows, strings, etc Every value in the output range must be of the same type and in the same format, really convenient :)
dude, you are best :)
I love your content!
My guy! Thanks for the comment :)
ok this is nice but honestly i was expecting this project in GatsbyJS :D
And please continue the awwards series...
Since this was a small project I figured that using cra would be better because it will be easily transmittable to next.js or gatsby.js.
Seems like the next awwwards series should be in gatsby huh?
@@WrongAkram yes please..... :D When the new episode is coming?
@@WrongAkram Please next not gatsby
@@WrongAkram Love the video , really appreciate the effort put in and your experience. If you are doing a GatsbyJS maybe introduce some good patterns on abstraction . Doing my first project in react/gatsbyjs and found so little on the www .Thanks to you i'm planning to introduce some framer motion. Thank you && stay safe
360p video quality? 🤔
RUclips takes few minutes to completely process the video so check back in a bit.
Awesome! :D
Appreciate you :)
@@WrongAkram brother, where can i be connected with you?
Thanks for your tutorials they are really cool
Could you help please what about this apples web pages like www.apple.com/ipad-pro/
They use some mask/flow images. It looks really cool but I can't understand the logic and technology
"micro" hahahah
Code too tiny
Noted
Amazing
Thanks! Really appreciate you!