How do I make a element animate when it enters a certain area not the viewport

[Sowjanya]

How do I make a element animate when it enters a certain area not the viewport?

 

I want to make the box to change scale when it enters the .down of the #page, but it doesn't animate that way the animation only works when I scroll the body

See the Pen MWvJaeB by sowg (@sowg) on CodePen

[akapowl]

Hello @Sowjanya

 

What you are looking for is the scroller property. This here is what the ScrollTrigger documentation says:

 

scroller

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

 

Some sidenotes:

 

If you want each element to animate when it hits a certain spot within your scroller, you will probably want to loop over all your elements and create a ScrollTrigger for each of them with the element itself set as the trigger (or alternatively, depending on your desired outcome take a look at the .batch() method ) and also only target that specific element in your tween. Speaking of that, it looks like you want to tween from specific values to specific values but actually your .from and your .to would do exactly the same there, I think - maybe you wanted to go for a fromTo-tween there instead ?

 

If you're going to tween on the scale of the element you chose as the trigger like that and thus change its initial scale, your start and end will not be where you might suppose them to be (they will be dependent on that initial scale of 0.5 then instead of their actual scale). If you want to animate the whole figure element, I would suggest wrapping it in another div and use that div as the trigger instead - or keep the figure element as the trigger and tween the scale of the elements inside of it (img and figcaption), which of course will then look slightly different.

 

 

 

Below is one possible example for what I understood it is you were trying to do, hope it helps a bit.

 

I exchanged your images in this pen as yours were quite large and caused quite some lag on entering the viewport. Also I wrapped everything up in a load-event function, to make sure the code runs after the images are loaded.

 

See the Pen 670b04a3d6d220d8a80af5d2e9b006ad by akapowl (@akapowl) on CodePen

 

 

[Sowjanya]

19 minutes ago, akapowl said:

Hello @Sowjanya

 

What you are looking for is the scroller property. This here is what the ScrollTrigger documentation says:

 

scroller

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

 

Some sidenotes:

 

If you want each element to animate when it hits a certain spot within your scroller, you will probably want to loop over all your elements and create a ScrollTrigger for each of them with the element itself set as the trigger (or alternatively, depending on your desired outcome take a look at the .batch() method ) and also only target that specific element in your tween. Speaking of that, it looks like you want to tween from specific values to specific values but actually your .from and your .to would do exactly the same there, I think - maybe you wanted to go for a fromTo-tween there instead ?

 

If you're going to tween on the scale of the element you chose as the trigger like that and thus change its initial scale, your start and end will not be where you might suppose them to be (they will be dependent on that initial scale of 0.5 then instead of their actual scale). If you want to animate the whole figure element, I would suggest wrapping it in another div and use that div as the trigger instead - or keep the figure element as the trigger and tween the scale of the elements inside of it (img and figcaption), which of course will then look slightly different.

 

 

 

Below is one possible example for what I understood it is you were trying to do, hope it helps a bit.

 

I exchanged your images in this pen as yours were quite large and caused quite some lag on entering the viewport. Also I wrapped everything up in a load-event function, to make sure the code runs after the images are loaded.

 

 

 

 

Thank you so much! Really Appreciated