On-Scroll Reveal Animation with React & Framer Motion
Вставка
- Опубліковано 7 вер 2024
- Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Let's make a reusable reveal animation, triggered on scroll, using React and Framer Motion!
📚 Project Links
live version: steam-portfoli...
code: tomisloading.g...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/Tom...
Twitter: / tomisloading
Subscribed. The voice and straight forward method of the tutorial is perfect. Sounds like it's playing x2 speed which is great. No wasting time.
You're awesome dude, I appreciate the straightforward content. No bs.
Thank you!! 😁
Simple and straight to the point. Great video!
Very good Video and well explained, thank you so much for your Effor. Cant wait for other Videos!
Thank you so much! 😁
You got a subscriber. I always loved animation in webdev, and I can't wait to explore your channel and all the resources you are posting about.
the code is not free ;)
Hey guys!!! Super quick note: Unfortunately the template is no longer free 😔 I do have good reason for it though!! 👇
From the response that I’ve received between this video + one similar that I posted on TikTok, I’ve realized that portfolio templates are significantly more useful to a lot of you guys than I originally anticipated (hundreds of people have downloaded the template, many of which have messaged me letting me know how much it’s helped) This is amazing.
Because of this, I’ve decided to spend a bunch of time building out a whole bunch of these templates for you guys to use and hopefully help you land some jobs!
That said, each of template takes 20+ hours to design and build.
Making these a paid product seems like the absolute best way I’ve come up with to both provide value back to the community, as well as support the amount of time it takes to make my videos. I’ve considered courses since that’s the normal course of action for creators, but I really like the idea of keeping all of my content as free as possible.
I’ll be posting a second template (my personal portfolio that I used in my last job search) in the next couple of days, followed by another that I’m working on in a week or two.
I’ve turned on PPP in GumRoad, so pricing should adjust based on your countries cost of living :)
Sorry again if you missed the window of this being free, I really hope I can build something cool here that can help thousands of developers in their job search!
bro i can understand your pint but i cant afford it i am a student please can you give me this template for free
Thank You Tom.
much love bro! thank you so much
You explained this really clearly, thank you! Teaching seemed to come naturally.
you're actually too good
This is so awesome tutorial. Thank you so much! :>
This product supports purchasing power parity. Because you're located in Algeria, the price has been discounted by 60% to $6.
Great video man, well explained and easy to follow. Subbed!
Thank you man you really explained it well even though I'm able to understand this framer thing in one video means you deserve 🏆
😂 Thanks again 👍🏼
Thanks Tom! Well explained.
Thank you man. Very helpful.
Amazing! thank you Tom!!
you explain it so nice ty so much
Great and informative video. In my current project, I made a sidebar; everything is working perfectly fine except one thing. In your above web application, when you scroll to the About section, the About in the sidebar is highlighted. When you scroll to projects, the project in the sidebar is highlighted, and so on. I want to achieve the same thing in my current project. Can you please suggest something and explain how you did this? I am using React.js. Thanks.
you are perfect brother keep going
Great video, I wonder how you caught up with such an astonishing design
Thanks man!
Love this
Fun animation!
Really helpful, thanks!
Thanks so much
Hi Tom! I'm finishing my portfolio adding some animations thanks to your tutorials. Thank you so much! I'm very anxious to show it to you very soon. Here is something I couldn't found out and wanted to ask:
1) This is not a question, but I founded I could do the same with " whileInView='visible'. Meaby this function wasn't eable when you made your video.
2) Even though, a want to do this: when the element gets out from the viewport because I scrolled down, I want it to stay animated (that would be "once: true"). But when I come back to the top of my page I want to reset the animations (that would be "once: false") so the elements animate again. I am adding a "isOnce" state, then a useEffect whith a window.addEventListener and saying: setIsOnce (window.scrollY > elementRectTop). But is not working (not with "whileInView" and not with "animate:{mainControls}". Can you give me your opinion? Thank you again!
More advanced tutorials on Framer Motion please!
Check out my last few videos! 😁
Thank you very much sir!!
Happy to help! :)
nice
Wow nice
Why taking 2 animation controller, we can do that also with 1 animation controlller
Simple easy quick
thanks for sharing, save me hours
Bro, thank you!
any idea why useEffect is executing, even if I'm not in view?
The portfolio is not free now , but nice video
Just Nicksindian doing his side jobs 😂😂
thank you very much ♥♥♥
Thanks for sharing :-) Love it
It doesn't works with image.
What is the solution?
great stuff man
Does the framer motion have any impact on SEO?
Amazing video!
Curious as to why you didn't use Framer's whileInView property?
cooooooool!
awesome ,
Thanks a lot
Pretty good video thanks for the content. ;)
hey color section of div isnt working for me
Hi! Your template is beautiful. I decided to use it for my portfolio and i would like to give credit when i deploy it. Is there any other social media that you would like me to include? Ill probably end up posting on LinkedIn and Twitter. let me know! 💜
Thats awesome!! So happy I can help :) Just UA-cam or TikTok would be fantastic, thank you!!! :D
hi bro can you give me the template because its paid right now
tell me your twitter handle i will ping you there
@@bhuvya11pay the guy geez
Can I get the template please, it’s paid right now
!Thanks for sharing¡ :)
How can I do the same for animating text color while scolling back and forth
Use the useScroll to monitor the Y and useTransform to change the state...then inner style your element with the state in useTransform
How did you import Reveal into your file?
It's no longer free
I am a bit confused on how to make the animation repeat once I scroll off the element and back to it? Also my console shows only one state change from false to true and then never hits false again when I scroll off.
You'll need to set "once: false" in the useInView hook :)
@@tomisloading thanks I found it moments after posting a question hahah
@@zgazenamacka2421 Hahaha, happens to me all the time xD Happy you could figure it out!!
the template is no more free
Hi there Tom! How can I get the code of your project as you have mentioned its available for free? Please let me know!
How did you managed to make all the sections as children? I'm stuck at that point.
@@muhammadammad330 Hi man!! Have you already got it how it does? If you don't, I can help you with that.
@@pedrohenriquerocha8741 please assist...
@@pedrohenriquerocha8741 if you have shared it with me
$15? why
You don't need framer for all this. This is basic animations the tradeoff of including this library, even after treeshaking is not in the positive.
its paid now :(
this is not a free code source :)
Hey! Sorry about that, check the pinned comment!
its not free, its 15 dollers
You talk too fast. Have it in mind that you're teaching beginners too
very rushed content, you are just talking to yourself and not explaining.....
my reepet animation not work
plz help anyone
"use client";
import { motion, useInView, useAnimation } from "framer-motion";
import { useEffect, useRef } from "react";
const Reval = ({ children, width = "100%" }) => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
const mainControls = useAnimation();
const sideControls = useAnimation();
useEffect(() => {
if (isInView) {
mainControls.start("visible");
sideControls.start("visible");
}
}, [isInView]);
return (
{children}
);
};
export default Reval;
bottom spelling