Animation in swipe events (mobile patterns)

Animation in swipe events (mobile patterns)

  

How can I use an animation on the swipe events from the mobile patterns of Silk UI. I want to swipe between lots of pictures (No, I dont want to use one of the other components) and making it more user friendly by using some kind of animation for the swipe.

Anybody now ho to implement some kind of animation? Css or Javascript?

With kind regards,

Erwin van Dis

Hello Erwin

Which SilkUI patterns are you using right now? 

I think what you are trying to accomplished is easily achieved with the Carousel SilkUI Pattern (please see here) with no need for CSS or JavaScript.

Would this be a solution for you?

Regards,

Ângelo

Hello Erwin

Which SilkUI patterns are you using right now? 

I think what you are trying to accomplished is easily achieved with the Carousel SilkUI Pattern (please see here) with no need for CSS or JavaScript.

Would this be a solution for you?

Regards,

Ângelo

Hallo Angelo,

Thanks for your reply. As mentioned, I am using the swipe events and I don't want to use any other SilkUi pattern because of some techinal limitations.

So this is no solution.

With kind regards,

Erwin

Hello Erwin


You are using the swipe event but are you using it in some SilkUI pattern?


Regards,

Ângelo

Hello Erwin


You are using the swipe event but are you using it in some SilkUI pattern?


Regards,

Ângelo

No I am just using the swipe left and the swipe right of the mobile pattern swipe events.

With kind regards,

Erwin van Dis

Hello Erwin

I guess you can use a Container, associate it with the Swipe Event pattern and make your own logic to have it swipe through a list of pictures, but this sounds to me like a lot of work to do something the carousel does by itself

This page here helps you understand better the Swipe Event widget


Regards,

Ângelo

Hello Erwin

I guess you can use a Container, associate it with the Swipe Event pattern and make your own logic to have it swipe through a list of pictures, but this sounds to me like a lot of work to do something the carousel does by itself

This page here helps you understand better the Swipe Event widget


Regards,

Ângelo

Hi Erwin,

And what about the Horizontal scroll pattern? 

Or do you want something more similar to this? (It was done with the touch events block)

Cheers

Hi Henrique,

I don't want to use another pattern than the swipe events (performance reasons). I want an animation that looks a bit like Tinder, where you see the a photo disappear (there is no need to see the next photo).

With kind regards,
Erwin

Hi Erwin,

I don't believe touch events perform worst than swipe events, but that's OK.

Have you looked into the stacked cards pattern to see the CSS that's being applied? I think inspecting the behavior+css of the pattern may give you a good insight on how to do it.

Cheers