Re: Request for Comments: Proposal for Touch-Based Animation Scrubbing

On Wed, Nov 28, 2012 at 8:23 PM, Rik Cabanier <cabanier@gmail.com> wrote:
> Can you explain how your image carousel works?
> Specifically, how are the animations on the images triggered and
> synchronized by the timeline?

I'd been thinking something was "off" when I put that example
together, and I was right - it's completely wrong, actually.

To do that example correctly, you need a separate @keyframes rule for
each element, which properly moves it to the end, then flips to the
beginning, and finally ends back at its starting location.  These will
vary for every one, because they're all different distances from the
end.

For example, the first would need:

@keyframes carousel-1 {
  0% { transform: translateX(0); }
  83.33% { transform: translateX(1000px); }
  83.34% { transform: translateX(-200px); }
  100% { transform: translateX(0); }
}

while the second image would need:

@keyframes carousel-2 {
  0% { transform: translateX(0); }
  67.66% { transform: translateX(800px); }
  67.67% { transform: translateX(-400px); }
  100% { transform: translateX(0); }
}

etc.

(I *think* the math is right on this.)

~TJ

Received on Thursday, 29 November 2012 05:13:05 UTC