css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This example shows how to change the speed of your animation with Tweene, in order to achieve slow-motion or fast-forward effects, using the same code for all supported libraries, including CSS Transitions.


  1. Great demo.

    I used this demo to compare performance on mobile devices (Galaxy S4, Galaxy S5, LG G Pad 8 and Nexus 7 2013). Both Velocity.js and GSAP seem to trigger GC (Garbage Collection) or some sort of redraw and thus causes micro stutters from time to time where as Transit doesn't do that.

    I began implementing Tweene on my lastest pen (Velocity.js Sequence) but i found the way it works and the documentation a bit too confusing to be able to implement it quickly unfortunately (but i'll probably give it another try). The whole timeline thing and the "fromTo" feels a bit confusing in comparison to the way Velocity.js does things. Too much code seems to be required just in order to do transitions.

  2. Hi Tommie, thanks for your feedback. Tweene API is largely inspired by GSAP API, so are Timelines and fromTo method. If you know how they work for GSAP, you will find quite easy to use them with Tweene.

    About the code required, it's almost the same amount needed for doing the same things natively with supported libraries. In the example I've used a fluent syntax, but it's a matter of taste, you can obtain the same result with this:

    Tweene.fromTo($rocket, {rotate: 0}, {rotate: 360}, 
              {duration: 3, easing: 'linear', loops: -1});

    Does it seem more familiar to you? It supports a lot of different syntax styles, in order to be easy whatever is your favourite library and coding style.

  3. By the way, part of the reason things stutter a bit on mobile devices in the GSAP flavor is that you forgot to add force3D:true (or "auto") to have it put the element on its own compositor layer - that would make it a much more fair comparison because Velocity and transit are doing that. GSAP just doesn't assume that's what you want (although that may change in the future - we were just trying not to make too many assumptions about what the user wants).

  4. Hi Jack, In the SCSS of the example I've put transform: translate(0, 0, 0); in order to force it, is this enough for GSAP too or do I have to do it manually in the tween code, as you suggested? Thanks

  5. If you did something like transform: translate3d(0,0,1px) or something like that, it'd work because there's an actual 3D value (non-zero). I'd recommend just adding force3D:true to the GSAP tween though.

  6. Oh, ok, I had missed the "non-zero" part, thanks! :) Anyway, as you has said, the user can pass force3D:true with Tweene too, it will pass it down to GSAP

  7. Federico: Yeah, it does but the fromTo wasn't the problem though but rather the timeline ordeal.

    In Velocity one can simply do:

      var seq = [
        { elements: elem1, properties: { translateY: [0, 200], opacity: [1,0] }, options: { display: false, stagger: 120 } },
        { elements: elem2, properties: { translateY: [0, 60], opacity: [1,0] }, options: { display: false, stagger: 60 } }

    ..to run a sequence. Check out the pen i began converting to Tweenme: http://codepen.io/tommiehansen/pen/netCu?editors=001

    GreenSock: Velocity micro stuttered from time to time exactly like GSAP did in my tests though so if Velocity applies transform hacks in order to boost performance on mobile it isn't working that great. Do note that micro stuttering isn't the same as pure lag where it just lags all the time. The micro stuttering phenomenen is more like something going smooth 95% of the time but with small jitters/stuttering from time to time.

  8. Tommie, in that example you are using Velocity UI "stagger" feature, which is not yet supported by Tweene (GSAP does, natively), so currently it's not possible to replicate the same thing with the same amount of code. Anyway, It's already on the to-do list. The limit of the sequence solution, as far as I know, is that it's hard to schedule overlapping tweens, while with timelines it's totally streamlined. Also, with Tweene's timelines you can pause, reverse and change speed dinamically to the whole sequence, whatever is the animation engine used.

    About the square bracket syntax for property values, I've made the choice to reserve it only for per-property easing, which is well known and used by jQuery too. Anyway, if there will be more requests in that direction from users I'll consider to add it for passing properties starting values too, as Velocity does.

  9. Minor correction: Federico, I think you meant translate3d(0, 0, 1px) instead of translate(0, 0, 1px) which is invalid (missing the "3d").

  10. gosh, what a shameful error I've done! Thanks!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.