The Framer Motion Scroll Animation Masterclass - Çift Dilli Altyazılar
There are three distinct ways to create scroll based and scroll triggered animations with framework motion.
With just these three tools and a bit of creativity, you can build just about anything that you want.
Let's take a look at how all three of them work.
For our first example, I just have some text that is currently hidden behind this blue square.
So we're seeing right here.
And I just want this blue square to fade away whenever this is in the viewport.
The easiest way to do that is just to take this div and turn it into a motion.div.
Motion is just an import from frame emotion to be able to see that up here.
We'll then set an initial state on our div in this case of opacity one,
and then just using the while in view prop, change that to an opacity of zero.
With just those basic changes, we should see that this fades out whenever it enters the screen, either from the top or from the bottom.
But we'll notice that this happens.
really quickly, right?
Like at the top of the box or the bottom of the box starts to enter the screen.
The way to fix this is by opening up the viewport prop and then passing in an amount of all.
This will just tell the animation to only run whenever the entire element enters the screen, either from the top or from the bottom.
You can also be more specific about this by adding a margin offset.
So we could say.
margin of minus 200 pixels.
And we'll see that this has an additional negative 200 pixels of offset before it actually animates in or out.
And we can also tell this animation to only run once using once true.
And now after this fades in one time, it will never fade out again.
One additional quick little tip for this is that we can hook into these enter and exit events using callback functions to do this.
that we just need to use the on viewport enter and on viewport leave events and these are
just logging enter and exit opening up my console and scrolling we should see the enter and
exit logs happening as I scroll up and down quick note for anyone interested I do not take any
sponsors on this channel but I do run a website called hover.dev.
Hover is a library of animated active UI components built specifically for framer motion.
If trying to get better with animations, I you'll find a lot of great resources here.
Anyways, back to the video.
Now, sometimes you actually need multiple different events to fire, and for that, we're gonna use the use in view hook.
For this example,
I have something very similar, but I just have three divs that are each 1-3rd of width instead of the entire width.
we could do this the same way for this example, but you know, I didn't want anything too particularly complicated.
You can kind of see that these are separate, I guess, if I just turn this to say red or something.
And now we'll see that we have three separate boxes.
And the first thing that I'm going to do here is I'm going to create a ref up at the top using the react use ref hook
and add that to our wrapping div.
So this could be like an entire container section or whatever you want it to be.
It be a completely separate element from what you actually want to animate.
We just need some reference that we actually want to come into the screen so that we can pass
it into the use in view hook, which also comes from frame or motion.
The use in view hook will take this reference as well as some parameters.
So I will pass in the amount all similar to like what we did just a second ago.
And we can actually see this value changing.
If I just call it to log it with a use effect.
So as I scroll up and down,
we should see the element is in view,
the element is not in view, and we can do whatever we want now with this Boolean value.
In my case, I'm just going to take all three of these divs, and I'm going to change them for motion divs.
The far left and far right one will transform on the y axis minus 100%.
The middle one will transform 100%.
And with all of that together, we'll get some thing that looks like this.
So both of them stagger.
And all of this is just based on one Boolean toggle,
you can change however many things that you want, it's essentially just using a Boolean check to actually fire whatever code you want to fire.
Last but not least, we had the use scroll hook, the use scroll hook is pretty powerful.
So we're actually going to see three different examples of how we can use it.
For the most basic possible example, I'm just going to make sure that I've imported use scroll up the top.
And I'm going to instantiate it like this, use scroll, this is going to give you back four different possible values.
So scroll Y progress,
scroll X progress,
and then just scroll X and scroll Y,
go Y progress and scroll X progress are just a value between one and zero of how far you've scrolled up.
or to the left and right on the screen, and then scroll X and scroll Y are the absolute values.
All that I need for this exact example is scroll Y progress,
and we can actually see this value change using the use motion value event hook.
So use motion value event, we'll just take in a motion value, and then what event you want to listen for, in my case change.
And in this case, I'm just logging out the latest value.
So while I'm way up at the top it should be around zero and then as I get all the way down to the bottom it will be one
or close to one at least.
If the value that we actually need, it's just between zero and one that we can just pass that directly in.
I already have my motion div right here, and I'm going to set a scale x equal to whatever our scroll y progress value is.
And now we should see that the scales from zero to 100%
as we scroll up and down,
this could be used for like, you know, a reading thing on a blog post or whatever you want it to be.
And we can of course also animate different values by just using the use transform hook.
An example of that might be something like this.
So maybe we want to animate the background color.
We'll use the use transform hook.
This also comes from frame remotion.
We'll pass in our scroll y progress.
0 and 1 and we want to animate that between straight white and then this bluish color.
You then just take our background color and cast that in as well.
And up at the top we should see that as right around white and as we scroll down it slowly turns to blue.
By default the used scroll hook is going to be based on the viewport scroll as a whole which might not and probably most of the time actually is not
exactly what we want.
What we really want is to listen to a specific element scroll position in the viewport.
So in this case, I'm talking about this blue square that I have in the here.
Fortunately, we have a way to handle that as well.
So over in my code,
I'm going to create a ref, I'm just going to call it target ref, let's say ref is equal to target ref like this.
We'll then define our use scroll the same way we did just a second ago,
but we can also pass in now our target reference as a value called target,
and then just pass that in our target ref, we can use the use transform hook again to turn this into an actually usable value.
So let's say rotate in this case.
So whenever scroll Y progress is between zero and one,
I want to transform between zero degrees and 180 degrees, you can pass that into our did.
style prop like this and we should now see that as the element is entering the screen
it starts to rotate and then right before it exits it ends its rotation.
One additional thing that you might think as you're doing your animations like this
is this might not be the exact behavior that you actually want.
By that I mean this only starts its rotation as it fully enters the screen and animates until it
gets all the way up to the top.
like this.
Maybe you actually want the animation to start all the way as it's entering and run until it's completely exited out of the top,
or just when it's out at the top, or you can come up with as many examples as you want.
And the way that we do that is using the offset value which we can pass to use scroll like this.
Now offset is a list of strings defining the positions of the elements where the enter and exit the screen or the viewport.
The first being the beginning position of your animation and then the end position of your animation.
It's a little bit confusing to describe before we actually see it.
So I'm just gonna add a basic example and then we'll walk through it.
So I'm going to say start end and then end start and if we move slowly now we should see that our
animation starts right as the box is entering the screen.
screen and runs all the way until it exits out of the top and the way that you can read this is something like this.
So start is referencing the top in this case of our element and end is referencing the very bottom of our viewport.
So we're saying we want to start this animation whenever the start or the top in this case
because we're scrolling in the y-axis of our element meets with the end.
of our viewport,
we want it to run until the end of our element,
or the bottom, meets with the start of our viewport, or up here at the top.
So one more time slowly,
the start of our element meets with the end of the viewport,
and runs until the end of the element meets with the start of viewport.
We can look at another quick example.
I'll just paste this in.
Let's try start, start, and start.
I'll let you think about this first.
second if you want pause the video now if you want to try and figure out what you
think this is actually gonna do three two one okay time is up let's take a look
And what we're going to see is that the animation only starts whenever the very top of
our element meets with the top of the screen.
So the start of our element meets with the start of the screen,
and it's going to run until the end of our element meets with the start of the screen,
aka it will do its full rotation just up at the top.
This can be super,
super useful if you're just trying to fade out at the top of the screen or scale out at the top of the whatever it may be.
Additionally, you can even pass in single values like center, oops, typo, like center.
And now this will start whenever it meets with the center of the screen.
more values like percentages or even pixels.
So could say something like 25% meets with the start and we can see what that does.
So it's actually going to wait until it's 25% passed.
And then it's going to rotate a bunch more fun stuff that you can do with this.
I will let you play with that yourself moving on to the last example.
So sometimes the scroll container you want to listen to is not actually the pages scroll, but some additional element scroll.
In case,
I just have this horizontal scroll container with a box in the middle,
and we can take a look at how we can create an animation for something like this.
So for my example code over here on the left,
I already have two ref setup,
one for my container element, which has the overflow x of scroll, and then another one for the element itself.
To start, I'll just create a call to the use scroll hook per usual.
We'll pass in our reference for our container this time as opposed to just our target.
Of course, we need to pass in our target as well.
And since we're scrolling on the x axis, we need to define an axis of x.
And then we can just take this value and use it as we normally was so down here on my motion div,
I'm just going to keep it simple and set this to opacity.
Now we should see that as we scroll this through this element, it fades away.
Of course, we can use our offset values here as well.
So let's try something like in start, start, start.
And now our element only starts its fade right as it gets to the end of our element and completes its fade as it completely exits the screen.
With just these tips, I've been able to put together all kinds of really cool stuff.
Again, you can check all those out on my website.
All of this source code is going to be available as well.
Çeviri Dili
Seç
Daha Fazla Özelliği Açın
Trancy uzantısını yükleyerek, AI altyazılar, AI kelime tanımları, AI dilbilgisi analizi, AI konuşma vb. dahil olmak üzere daha fazla özelliği açabilirsiniz.
Büyük Video Platformlarıyla Uyumlu
Trancy, YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera gibi platformlar için çift dilli altyazı desteği sağlamakla kalmaz, aynı zamanda düzenli web sayfaları için AI kelime/cümle çevirisi, tam metin etkileşimli çeviri ve diğer özellikler sunar. Gerçek bir çok yönlü dil öğrenme asistanıdır.
Tüm Platform Tarayıcıları
Trancy, iOS Safari tarayıcı uzantısı dahil olmak üzere tüm platform tarayıcılarını destekler.
Çoklu Görüntüleme Modları
Tiyatro, okuma, karışık ve diğer görüntüleme modlarını destekleyerek kapsamlı bir çift dilli deneyim sunar.
Çoklu Uygulama Modları
Cümle dikte, sözlü değerlendirme, çoktan seçmeli, dikte ve diğer uygulama modlarını destekler.
AI Video Özeti
Videoları özetlemek ve hızlı bir şekilde temel içeriği kavramak için OpenAI kullanın.
AI Altyazılar
Sadece 3-5 dakikada doğru ve hızlı YouTube AI altyazıları oluşturun.
AI Kelime Tanımları
Altyazılardaki kelimelere dokunarak, AI destekli tanımlarıyla kelime anlamlarını öğrenin.
AI Dilbilgisi Analizi
Cümle dilbilgisini analiz ederek cümle anlamlarını hızlıca anlayın ve zor dilbilgisi konularını öğrenin.
Daha Fazla Web Özelliği
Çift dilli video altyazılarının yanı sıra, Trancy ayrıca web sayfaları için kelime çevirisi ve tam metin çevirisi sağlar.