How can I add momentum / inertia to a drag using CSS transform?

Question

I am trying to add a momentum / inertia effect to a zoomed image drag (like in this example or just like iOs does it) and I'm having a tough time with it.

I've been struggling with this for a while and found some helpful resources (like this one) but most of the solutions involve jQuery and I would prefer to stick to plain javascript, no frameworks involved.

I'm working on a HTML5 / CSS3 zoom image code, with all the standard features: double-tap zoom, pinch zooming, dragging, panning, etc. and everything is done using CSS3's transform translation, combined with the scaling. Ex.

transform: translate(100px, 100px);
transition: 100ms;

I looked at how others are doing it and it involves consecutive animations of the left/right properties, with decreasing duration / distance, to create a sort of ease-in effect.

I tried to recreate it using translations, using a sort of recursive function (you can see a fiddle here (works with webkit browsers), please ignore the coding style, it was not meant to be best practice, just a demo). In this case, the animation is not fluid it all, the consecutive translations do not connect.

I have a somewhat basic understanding of the principle and I did take a look at some algorithms available online but I just can't figure out how can I achieve this using css translations.

The first part of the dragging, done on mousemove/touchmove moves the image with the cursor/finger but the continuing translation after the end is not... continuous, it's like a separate animation after the first one and doesn't resemble a natural momentum / inertia effect.

Faliscan

Answer 1

One method is using animation-timing-function:, which I believe currently requires vendor prefixes. You have a choice of using ease-in, ease-out, ease-in-out, or cubic-bezier. The latter uses the visualization of a function in 2D space; it's easier to configure that one using a generator. My personal favorite is Ceaser.

Herniorrhaphy

Yes, I looked at Ceaser before and it's a very nice tool. But as far as I know ease-in is already the default option for the animation. The problem I have it's with combining sequential transformations. I have one translation during the actual drag and when I try to apply another one (or more) after it ends, the result is not fluid – Faliscan

This seems complicated. I'll do a bit of research and get back to you. – Herniorrhaphy

Thank you for your help. It is indeed complicated, I've been trying to solve this quite some time now and every solution I found involved jQuery and/or animating the left/right values. It's hard to believe no one tried to do this before with HTML5 – Faliscan

Indeed. It's a bit soon to presume, but it doesn't look like this question's taking off. Could I recommend that you ask on alternative web development fora, like Daniweb? – Herniorrhaphy

I will give it a try but I think it's too soon. I'll probably wait until tomorrow – Faliscan

Trust me, it's never too soon. Daniweb generally isn't as dynamic a community as StackOverflow, so it takes longer to get answers, but 99% of the time, your question gets answered within a week of posting a competently asked, interesting question (yours is both). – Herniorrhaphy

Answer 2

I managed to find something helpful in the end, it is still a work in progress but the results look promising.

The starting point was this post made by Aryia Hidayat and in particular his Kinetic Scroll, as well as a post made by Joe Hewitt. Also, this older version of his code seemed easier to understand and grasp the basic concept, even though the most recent should be better.

Basically, instead of connecting various translations with a non-null duration and synchronize their timing and acceleration, this method uses a large number of 0-duration translations, called very often.

Faliscan

Care to elaborate what "crap" is meant above? – Jakejakes