Update: I wasn't aware of the `viewport.once` option on both the useInView hook and motion elements! The FadeUp component can be simplified to: function FadeUp({ children, delay = 0, duration = 0.5, }) { return ( {children} ); } No refs, hooks, or effects. Much tidier!
Yeah was hoping Sam would refactor the code to make use of this because he usually builds out stuff in a complicated way first and then shows how it can be simplified and improved on. Ultimately probably doesn't matter since it will likely just be handled by a useEffect or similar internally but would still have been nice!
Great video! You can also make use of the “initial” and “whileInView” (instead of animate) props on motion components so that you don’t need the hooks. Then use the viewport prop to set the whileInView config and set “once: true” to achieve the same result. DISCLAIMER: I’m using the alpha version but didn’t take the time to check in which versions that was available.
Hi Sam. First of all, thanks for all the work you are doing. Glad to see your channel growing as you are for me, the most underrated react ortiented content creator. Now, I would be interested to know about SEO impact of this method if you have more informations on it. I would LOVE to use Framer Motion too but kind of worried about SEO impacts.
Love your videos! Really learning a lot and got motivated to do better UI! May I add an idea for one of you next videos? I really want to see how can we recreate the google calendar drag to create event on the calendar. If I am not mistaken this is possible on the week view, and you can click over a day and drag with the mouse to select multiple days and then this turns into an event spanning multiple days. Really cool functionality!
I’m not implementing this but this was a nice watch. You moved pretty fast! If you wanted no fade in on initial view, would you use a useeffect to tag each time with a bool (ex: isInInitialView) and render with view transitions that reflect this? (E.g., no fade for initial items) Edit: maybe a preventFade Boolean makes more sense, this way once initial leave initial view, you can set it to false
It's not derived, it actually is new state. isInView flips back and forth every time the element enters and exits. So the new state is representing "hasEnteredOnce". You need new state for it. (Turns out there's a `once` option on useInView that does this for you! But conceptually it is a separate piece of state.)
Update: I wasn't aware of the `viewport.once` option on both the useInView hook and motion elements! The FadeUp component can be simplified to:
function FadeUp({
children,
delay = 0,
duration = 0.5,
}) {
return (
{children}
);
}
No refs, hooks, or effects. Much tidier!
9:17 what is the shortcut command to replace tags?
😮great
@@samiullahsheikh5015 ctrl + shift + w on vs code should do the trick (embedded emmet)
We can also set once:true in useInview hook instead of using useeffect
Yeah was hoping Sam would refactor the code to make use of this because he usually builds out stuff in a complicated way first and then shows how it can be simplified and improved on. Ultimately probably doesn't matter since it will likely just be handled by a useEffect or similar internally but would still have been nice!
Yes I passed that to mine, actually developed a very similar component recently
@@timothy812 What!! 🤦♂️ TIL!!!
@@samselikoff we all learn something new everyday haha !
Amazing!
export function FadeUp({
children,
delay = 0,
duration = 0.5
}: {
children: ReactNode
delay?: number
duration?: number
}) {
const ref = useRef(null)
const isInView = useInView(ref, { once: true })
return (
{children}
)
}
I'd love to see you snippets configuration, love how you quickly wrap existing stuff into new components and things like that. Great content here!
You are such a great educator 👏🏼keep the videos coming
Hey Sam I’ve been really loving your content recently- please keep them coming! Biggups from the UK
Keep coming these kind of videos, they are great and fun to learn new things from you.
Thanks.
Great video! You can also make use of the “initial” and “whileInView” (instead of animate) props on motion components so that you don’t need the hooks. Then use the viewport prop to set the whileInView config and set “once: true” to achieve the same result. DISCLAIMER: I’m using the alpha version but didn’t take the time to check in which versions that was available.
Didn't know about this option either! Great approach 👍
This is fantastic, definitely going to use this in a project I'm working on. Thanks for the lesson, been learning a lot of React from your videos.
Thank you Sam.
This is so nice. Thank you again Sam.
Hi Sam. First of all, thanks for all the work you are doing. Glad to see your channel growing as you are for me, the most underrated react ortiented content creator.
Now, I would be interested to know about SEO impact of this method if you have more informations on it. I would LOVE to use Framer Motion too but kind of worried about SEO impacts.
There should be no issues, because it transitions from opacity: 0, which is still visible to crawlers and screen readers.
@@notkamui9749 well ... That was also a way to do keyword stuffing back in the days ... 🥲
woooow you are on fire!
Love your videos! Really learning a lot and got motivated to do better UI! May I add an idea for one of you next videos? I really want to see how can we recreate the google calendar drag to create event on the calendar. If I am not mistaken this is possible on the week view, and you can click over a day and drag with the mouse to select multiple days and then this turns into an event spanning multiple days. Really cool functionality!
Thank you so much sam
Amazing video! i want moreeeeee
One of the best React educators on the tube. And Sam has also one of the fastest keyboard navigation for a VSCode user. Keep up the good work!
So handy. Thank you!
COOL MAN! you are amazing!
Are you really building a marketing website if your content doesn't fade up on scroll? 😅
thank you. i like more this approach instead of gsap's scrolltrigger.
ps: 12:31 how do you do that in vs code? i mean auto wrap the selected elements.
I’m not implementing this but this was a nice watch. You moved pretty fast!
If you wanted no fade in on initial view, would you use a useeffect to tag each time with a bool (ex: isInInitialView) and render with view transitions that reflect this? (E.g., no fade for initial items)
Edit: maybe a preventFade Boolean makes more sense, this way once initial leave initial view, you can set it to false
Thanks Sam! What are some other cool unstyled components that can be used in a marketing page context?
🎉 Really good
What is that “range” thing you did at the beginning of the video?
I think this way would reduce code:
Yep definitely, I wasn't aware of the viewport option! It's so nice!
🔥🔥🔥
Which IDE do you use? You’re wrapping blocks so easily
I was waiting for the ‘viewport: once’ and ‘whileInView’ refactoring since you always start with a working one then improve it
Another commenter mentioned it - I actually wasn't aware of the option! Definitely an improvement 👍
so nice
@samselikoff
Quick question, this is out of topic but what keyboard do you use or which one is your favourite?
Why useEffect instead of deriving state in a new variable?
It's not derived, it actually is new state. isInView flips back and forth every time the element enters and exits. So the new state is representing "hasEnteredOnce". You need new state for it.
(Turns out there's a `once` option on useInView that does this for you! But conceptually it is a separate piece of state.)
Why can't we simply use the whileInView attribute for the motion component?
I didn't know about the viewport={{ once: true }} option! You definitely can, it would simplify the implementation 👍
@@samselikoff Thanks man, btw I love your videos. Your content is so engaging like your content makes me learn so much new and refreshes my basics.
Seems excessive to break out a whole animation library for something that could be done with just CSS and an intersection observer
Cool
But we can do that with gsap so easier