Animation and manipulation of ion-scroll

Ionic Framework ionic-v3
1

As a first step, I’d like to achieve something similar to itemSliding.close().

Let’s say we have an ion-scroll that scrolls in the X-direction. There’s an ion-row with 10 ion-columns, and the user interacts with an element in column 6. Does anyone know a way I can say, “move the scroller until the left margin of column 0 is flush left?” Or, “Move the scroller until column 4 is flush left?” I’m not even sure what properties I can grab onto.

Thanks.

2

Take a look at this: It’s a pretty good tutorial that gives you an idea on how to “animate” in Ionic 2

If you get stuck on a specific item, let us know and we’ll help

3

Thanks for the reply. I must admit, I read that before posting here, and I still don’t understand how to solve my problem, even though Josh Morony is great at explaining things. The Animations API seems focused on DOM elements and flexboxes, while ion-scroll is a “nonflexboxed scroll area.” (To be honest, I’m not even sure what an “area” is, exactly.) Could you please tell me what I’m missing?

4

I think you need to dig into your web inspector a little bit, and find out what kind of HTML is being rendered with an Ion-Scroll. (It’s just a couple of nested divs with classes populated for scrollable content)

Remember, this is just an angular 2 application. Have you followed this post as well?

You’re basically doing to be doing something like this.

<ion-scroll [@scrollToPosition]=“className”>

trigger(‘scrollToPosition’, [state(‘in’, style({transform: 'translateX(position)}

Without you having shared any code on your setup, or the desired result it’s hard to write actual states.

5

I hope it’s as simple as you say it is. Perhaps it only seems complex because I am confused. But for example a scrolling instance in ng2-page-scroll has a lot more going on than what you are saying. And there’s the question of how to minimize or avoid will-change flicker, which I don’t know how to deal with across platforms. Anyway, I’ll try a few things and see what happens! Thanks again.

6

I wouldn’t assume it be simple, and I’m no expert by any means. If I get some time this weekend, I’ll see if I can work-up an example, but it would be helpful if you could post your HTML that includes the component you’re attempting to animate, and describe the “states” you want to animate.