Framer Motion Staggered Animation Triggered by Scrolling Once Into View

👉 NEW React & Next.js Course: bytegrad.com/c...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/c...
👉 Professional JavaScript Course: bytegrad.com/c...
👉 Professional CSS Course: bytegrad.com/c...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad...
⏱️ Timestamps:
0:00 Explanation
#webdevelopment #coding #programming

[@developerpranav]

This was exactly what I was looking for! Animations will make my client's boring website less boring, and I keep my good contract. Thanks!

[@jasongrant2366]

Exactly what I needed. And wasn't that far to get to the solution

[@murtazadhinojwala5954]

thak you very much this is exactly what I wanted

[@sujalvanjare06]

thanks for this, this is what i am looking for, keep it up.

[@alirezanikzad3383]

that was so cool ty for learning

[@mrrobot9101]

I usually use the animate: { transition: { staggerChildren: 0.05 } } for the parent element and it will act like a delay for each child item.

[@ahmedahmedx9600]

I heard that the parent should also have animation (initial, animate) then you can use transition on it, but I don't want to animate the parent I only want to use staggerChildren ?

[@iPankBMW]

Yes staggerchildren may be better for most usecases but it doesnt work if you have long list of items and you paginate the list for example by simply doing list.splice(from, to) - This will stagger the first children but not for other pages... so we have to use apprach used in this video.

[@faruksardar8829]

Quick and Easy to understand, Thanks for the video

[@pete531]

thank you, i have implemented into my own project which has a similar map but its with images and its works great, thank you

[@srivee112]

hey man, you made my day! keep rocking with these tutorials.

[@syncosota]

thank you sir. very helpful ❤

[@ahmedahmedx9600]

Sir can you make a video of each animation you have in this project ? Its really amazing

[@alejandroyanes391]

he got a tutorial in his channel with a tutorial of creating this portfolio

[@ahmedahmedx9600]

@@alejandroyanes391 yes I find it, thank you

[@lucasveloso9784]

Thanks for the video, was very helpful

[@ayoubelgueddari3767]

thanks man 👌👌

[@4138HD]

Thank you, was very helpful! 😁

[@prexverdeflor01]

thanks

[@mikecebul]

Great video as usual. I'm stuck trying to only stagger the specific children in the viewport. Like, if they all are in the viewport they all stagger, but if on mobile there are only, say, 3 out of 10 in the viewport, only the three stagger, but resetting the delay so the last ones in the viewport aren't obnoxiously delayed.

[@alberto5056]

thank you so much for that, you really helped me, and also I just wanted to say to you, that your English is really good, I mean, I know that you speak English, but I mean, you talk very clearly and easy to understand, I'm from Mexico so English is not my first language, and I struggle a little to understand this kind of videos, but with your voice, it was different man, thank you dude. Have a nice day.

[@user-nt8nh7bl3c]

source code pls

[@rjtdas]

Hi, Could you please create a video on shared element transition between two pages?
One way i know is using layoutId from framer motion but i couldn't customize it
Assume page 1 has 1 image on left side and 2 page has the same image but on the right side
When navigated to page 2 from page one the image should slide to left
Please create this video, there's no video on TH-cam about it.
Thanks this was a super cool video ❤

[@ByteGrad]

Good idea!

[@saimarshadd]

Hey man very good video, also the whole project video is awesome. I have a typescript specific question. When using custom value prop you specified that it will be a number but if you go and pass it an object or an array or anything othet than a number, typescript doesn't complain why is that and how can we correct this. Also how can we make the variants typesafe so that we can get autocompletion and make less typing mistakes. Please reply! Thanks

[@salmantas2335]

Bro pls show this concept with bootstrap

[@igornakai2467]

there is a function called stagger, do you know how it works?

[@ByteGrad]

True, it was unclear to me so used this method