I'd like to detect if the ponent position. Is currently in a view port and if yes run the trigger which stats an animation on this particular ponent.
I can't find any "angular" way to do it.
Example app( main ponent) every div is a separate ponent of app:
<div id="one">ww</div>
<div id="two">aa</div>
<div id="three">rr</div>
<div id="four">asf</div>
<div id="five">Something...</div>
<div id="six">rq</div>
So... I'd like to detect when ponent five is in viewport (present on a screen) and start animate that ponent.
Any ideas?
Thanks
I'd like to detect if the ponent position. Is currently in a view port and if yes run the trigger which stats an animation on this particular ponent.
I can't find any "angular" way to do it.
Example app( main ponent) every div is a separate ponent of app:
<div id="one">ww</div>
<div id="two">aa</div>
<div id="three">rr</div>
<div id="four">asf</div>
<div id="five">Something...</div>
<div id="six">rq</div>
So... I'd like to detect when ponent five is in viewport (present on a screen) and start animate that ponent.
Any ideas?
Thanks
Share Improve this question asked Dec 23, 2016 at 13:28 RadekRadek 2411 gold badge4 silver badges9 bronze badges 1- 1 I don't want to start animation when ponent is fully initialised. I'd like to start animation when this ponent appear in a viewport. E.i. you scroll website and if ponent which initially was out of viewport appear in a viewport – Radek Commented Dec 23, 2016 at 14:31
1 Answer
Reset to default 11You could use the ng-in-viewport plugin.
HTML:
<div id="five" in-viewport (inViewportAction)="action($event)">Something...</div>
Component:
action(event : any){
if(event.value){
//Do something here (e.g apply CSS class to start the animation)
}
}
Check my detailed answer on a similar question here.