stop() animation #508

ottonascarella opened this Issue May 7, 2012 · 7 comments


None yet

7 participants


Helle there,

Thanks for the amazing work with Zepto.

I am missing a lot a stop for animation...any thought on that?

Cheers a lot,


enure commented May 7, 2012

Zepto uses css transitions, and there is no native api method to stop a css transition.

In order to work around this, you can:

  1. get the current webkit transform style properties
  2. remove the animating elements from the page
  3. add them back in with only the transform applied, but not animating

It's not perfect though, the elements will flash when they are removed and then inserted again.

wolfv commented May 7, 2012

Setting the transition time to near infinity should do the trick ... Not?

arextar commented May 7, 2012

I would also think setting the style to the computed property would work

enure commented May 7, 2012

@arexkun I tested it out and you're correct. You first set "-webkit-transition: none;" and then immediately set the transform value to the computed style. The computed style value comes back as a matrix (, so you have to parse that first before you can set the transform css.

@wolfv Setting the transition to infinity did not work for me. It continues the animation at the same rate as it was set initially.

mislav commented Sep 7, 2012

@enure If you've got working code, you could share with us here.

Not sure if we'll include in Zepto, but could be a plugin or just a snippet that people could use.

@madrobby madrobby was assigned Nov 24, 2013

Closing this because there was no response to our questions in a while. Feel free to reopen with the requested information!

@madrobby madrobby closed this Jul 12, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment