Animate ion-items on scrolling


#1

I have an ion-list populated using a JSON array. There’s a tab bar at the bottom, and I want to make it look as if the top-most and the bottom-most ion items fade when the user scrolls in either direction. How can I achieve this? Please help.


#2

Could you give some code example? :smiley:


#3

I would say you set an element in position : absolute out of the ion-content element so it’s positionned exactly where you want the fade to happen, and give it a gradient background with reduced opacity. Something like

background: linear-gradient(to bottom,  rgba(204,204,204,0.5) 0%,rgba(51,51,51,0.5) 100%);

Adjust the values to fit your needs. White is 255, black is 0, fourth value in each is the opacity.