daniel-lundin / snabbt.js

Fast animations with javascript and CSS transforms

snabbt.js

Fast animations with Javascript and CSS transforms

Docs

Documentation

Demos

• Card formations
• Crazy sticks
• Periodic table
• Laser words

Releases

The initial release is out. Would love some feedback on things that can be improved. The release(and future ones) can be found in the release section

• 0.6.4 - Manual mode complete bug fix
• 0.6.3 - IE Bug fix, polyfill for Array.prototype.find
• 0.6.2 - Bug fixes, Added sequencing of animations
• 0.6.1 - Fixed UMD-build
• 0.6.0 - ES6, test suite, life cycle events, new demos
• 0.5.8 - Add new tweenable property scalePost/fromScalePost
• 0.5.7 - Fix issues manual mode and spring easings
• 0.5.6 - Fix issues with duration: 0
• 0.5.4 - Added allDone-callback, updated docs
• 0.5.3 - Bugfix for manual mode with easings
• 0.5.2 - Compability fixes, polyfill for request animation frame
• 0.5.1 - Performance improvements
• 0.5.0 - Refactoring, show deprecation warnings
• 0.4.0 - Manual mode, function initalizers
• 0.3.0 - Memory optimizations, improved Matrix API, better UMD wrappers
• 0.2.0 - Added support for RequireJS and browserify. Published to npm and bower
• 0.1.0 - Initial beta release

Get it

snabbt is available with AMD-support, CommonJS-support and as a global module.

Package managers

bower install snabbt.js
npm install snabbt.js

CDNs

https://cdnjs.com/libraries/snabbt.js
http://www.jsdelivr.com/#!snabbt

Browser Support

</tr>
<tr>
  <td align="center">10+</td>
  <td align="center">✓</td>
  <td align="center">✓</td>
  <td align="center">✓</td>
  <td align="center">✓</td>
</tr>

Note: IE does not support the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

TODOS

• Improve documentation

MIT License © 2015 Daniel Lundin (http://twitter.com/danielundin).

snabbt.js's Issues

Trigger callback once per collection

The callback function always triggers once per element in a collection, see example:
http://jsfiddle.net/tommiehansen/b01achLn/8/embedded/result/

It is desired that it only triggers once per animation no matter how many elements that is being animated.

slow fps on chrome of android phone

Hi , it 's cool lib, but I check example below on chrome of my android phone, the fps is low
http://daniel-lundin.github.io/snabbt.js/sticks.html
Why it happen

Unexpected behaviour with easing in animation.finish()

I started from the drag to flip implementation of the demo. It seems that when using another easing method than linear, the animation does not continue and end smoothly when using animation.finish(), but jumps a bit forward/backward before finishing (obvious when using long durations).

npm does not install all required dependecies

Hello, For some reason when I install via npm I only get the snabbt.js file which calls for other files that are not present ( e.g. utils.js ). However when I install via bower everything seems to be in place and works correctly. The specific folders missing from the npm install are src and doc folders...

How to achieve transform-origin in snabbt

I'm using the snabbt.js to do the animation, I want to rotate a div from specific origin,
like in css { transform: rotateX(30deg);transform-origin: 0px 180px;} How can I achieve this by using
snabbt?

How to set initial positions for elements

I would like to have element initially out of the viewport before animating it inside the view with snabbt. In jQuery, I would do that by setting top: -200px; rule initially for the element, and animating top to 0.

Since snabbt uses transforms, what would be the correct way to set the initial positions?

Provides tern plugin for snabbt.js

Hi @daniel-lundin,

I think it should be cool if you could provide a tern plugin for snabbt.js to have completion, navigation, hover, etc inside a JS Editor (Web Browser, Sublime Text, Vim, Emacs, Eclipse, etc).

If you don't know ternjs, see demo at http://ternjs.net/doc/demo.html

Writing a tern plugin is very easy. See https://github.com/marijnh/tern/blob/master/defs/ and https://github.com/marijnh/tern/blob/master/plugin

With tern you could manage those cases inside JS editor :

s // Ctrl+Space shows snabbt

snabbt(element, { 
// Ctrl+Space shows position, rotation, duration, etc

If you are interested with this tern plugin, I could help you to write it. Tell me.

Stop callback

Is there a callback that gets called when the animation stops after a "stop" call?

Cannot work on some android devices?

This is a great library, and this works well on my android device and ios device, but it is not working on some of my friends android devices (the whole program died when meet the function snabbt). Can this be fixed? Thank you.

'opacity' tween not working

I tried this codes and nothing happen:

snabbt( document.querySelectorAll( "#box" ), { opacity:0, duration:0 } ).snabbt( { opacity:1, easing:'ease', duration:1000 } );

or

snabbt( document.querySelectorAll( "#box" ), { opacity:1, easing:'ease', duration:1000 } );

or

snabbt( document.querySelectorAll( "#box" ), { fromOpacity:0, easing:'ease', duration:1000 } );

I think it's something wrong with opacity, can you check?

That's an awesome work! Congratulations!

Manuel mode problem

Hi,

I am trying to do this and does not work

var Animacion1 = snabbt(document.querySelectorAll('.multi'), {
fromPosition: [1000, 50, 0],
fromRotation: [0, 0, 720],
delay: function(i) {
return i * 200;
},
easing: 'ease',
duration: 2500,
manual: true,
});
Animacion1.SetValue(1);

Can you point me in the right direction please?

Thanks in advance

possible to handle if the animation is started and in progress?

I read the API but only found the complete function for the option. Is there any way to handle things when the animation starts and is there also probably a call back function when the animation is in progress?

as i know, velocity has such features.

Anti-aliasing for Firefox

awesome work!

just one problem, we can see apparently aliasing when open the demo in Firefox.

Initialize layout with snabbt (duration = 0)

Can I set initial layout with snabbt?

i.e. use duration = 0 to set the position immediatly?

This would be very useful to initialize the layout. This way, I don't have to copy the Snabbt.js layout in CSS and I animate from start to end (and back) all using Snabbt.

Resource been blocked and got warning

 Mixed Content: The page at 'https://daniel-lundin.github.io/snabbt.js/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Raleway:400,300,600'. This request has been blocked; the content must be served over HTTPS.
(index):9 Mixed Content: The page at 'https://daniel-lundin.github.io/snabbt.js/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'. This request has been blocked; the content must be served over HTTPS.
(index):15 Mixed Content: The page at 'https://daniel-lundin.github.io/snabbt.js/' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/solarized_dark.min.css'. This request has been blocked; the content must be served over HTTPS.
(index):1 Mixed Content: The page at 'https://daniel-lundin.github.io/snabbt.js/' was loaded over HTTPS, but requested an insecure resource 'http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'. This request has been blocked; the content must be served over HTTPS.
(index):1 Mixed Content: The page at 'https://daniel-lundin.github.io/snabbt.js/' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'. This request has been blocked; the content must be served over HTTPS.

CSS 'transfrom' state should be parsed as 'from'

We can get them from window.getComputedStyle(element)['transform']
Can we implement it or there is some troubles?

Add Browserify support

Cool Library! Thanks! The performance seems to be really good. Would be cool if you could add Browserify support by adding CommonJS export and publishing snabbt.js to npm. For example Isotope/Packery also does it: http://metafizzy.co/blog/npm-browserify-support-added/

Half pixels, blur text

The translate3d matrix has half-pixel values...that causes text blurriness on chrome. Not sure if this is really an issue. But in my case I rounded the values in matrixToCSS function to nearest integer to solve the problem. Im not sure either why sbabbt makes full integer values to such a long floats.
Example position: [0, 374, 0] is 374.2063598633 in the matrix.

Percentage values

Position doesn't support percentage values. This is a problem for when one want to move something out of view and when at the same time the object that one is moving is of variable witdth, height etc (think responsive design and boxes that alter their widths depending on available screen width).

One could hack around this but it would be less performant and isn't an ideal solution.

manual mode does not work for chained and spring animations

when using spring animation the animation is time based even though the setValue is called.

chaning with manual mode results in errors.

Expected behaviour:
manual mode should just work as if the value was a value on a timeline slider controlling video playback.

this is absolutely necessary for most use cases and longer chained animation debugging.

iOS 5 not working

Not work in Ipad 1

Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

Moving to ES6

I read you're working on porting to ES6. Have you considered TypeScript as an option here? It's very close to ES6, but adds (optional) typing. Having the library written in TypeScript to begin with would also make it play well with tooling for TypeScript without having to write a separate TSD (tyescript definition) file. TypeScript can then trivially be transpiled either to ES6 or to ES5, resulting in very clean code pretty much identical to what would have been written in the first place should you have written in any of those dialects yourself, so you'd still get those "for free" as well, for users who don't want to deal with TS.

Just a thought. If you're not interested in this, I'll consider adding a TSD file for snabbt once the API settles.

Mike

Add sane examples

This is just a recommendation more then an issue per se but you should work on adding some basic UI examples. The stack cards etc are all nice etc but hardly useful for anyone looking to use snabbt.js for different types of UI-animations.

I may be adding my own stuff though since snabbt.js since you've added some much needed functionality and i like the fact that Snabbt.js is quite lightweight etc so i may integrate it onto a working project (a flight booking engine).

Poor performance in Firefox for Android

I’m not sure if there’s anything you could do about this, but just letting you know that when running the Sticks demo in Firefox on a Nexus 7 2013 device, I get only around 2 FPS. For comparison, Chrome is within 12 and 47 FPS and the animation is visually acceptable.

Maybe we could file a bug at bugzilla.mozilla.org?

Version

Awesome code! But what version is this? Still beta?

How to use the from_position option?

Is it possible to have from_position set to the previous end state by default without poking into CSS to get end state ?

Using CJS/AMD/ES6 modules instead of just concatenation

I think snabbt.js should use CJS/AMD/ES6 modules instead of just concatenation on build step. For now we have multiple var snabbtjs = snabbtjs || {}; in various places of snabbt.js file. This is kinda ugly and not jsHint/jsLint valid. Instead we can import modules and extend snabbt.prototype.

Can you add support for SVG elements?

Can you add support and examples for SVG elements? I make most of my UI elements in SVG with Inkscape and I'd love to use snabbt to animate them. Thank you!

Nice work.

Thanks for the inspiration. :} Some of us in the community are also working on a rendering engine (CSS transforms for DOM, and mixing it with WebGL), discussing and planning over at http://forums.infamous.io.

we're in the process of gathering our ideas by making individual prototypes, learning from the experience, then merging together into a single project. Three of the prototypes so far already work and can render scenes. Those are

• http://github.com/infamous/motor/tree/andrewreedy (by @andrewreedy, demo at http://hybrid-developer.meteor.com/)
• http://github.com/infamous/famin (by @gadicc, demos at http://gadi.cc/famin)
• http://github.com/dmvaldman/samsara (by @dmvaldman, demos at http://samsarajs.org/)

and two prototypes are still a work-in-progress, and will have demos soon:

• http://github.com/infamous/motor/tree/joe (by me)
• http://github.com/infamous/boxer (by @steveblue)

Thought I'd mention our project since we're doing something similar, and we can get inspiration from each other. :}

setElementTransform is not count as 'fromPosition'

When i use snabbt.setElementTransform to set position for elements without animation (start position), and later set new position with snabbt, elements are animated from 0, 0, but not from position, that was set in snabbt.setElementTransform.

Ask me for example if you can't reproduce or don't understand me.

simple error report

"Uncaught TypeError: this.runningAnimations.find is not a function" (from the Console in Chrome version 43.0.2357.81 m)
I don't ask for solution but just post it FYI - if it were an error on my laptop, it can be maybe on other's therefore lowering the popularity/wideness of usage by people/developers.

allDone and complete is not fired with duration: 0

I am trying to set starting position with duration: 0, but callbacks are not fired. Is it just me?

cubic-bezier easing

Hi. Is it possible to add cubic-bezier easing?

And for easing configuration i think object is better:

easing: 'spring', springConstant: 0.3, springDeceleration: 0.8

to:

easing: { type: 'spring', constant: 0.3, deceleration: 0.8 }

so i am asking something for:

easing: { type: 'cubic-bezier', points: [ .42, 0, .58, 1 ] }

Android WebView API 16

Got some issues using WebView on Android API 16. Guess some checking will fix it.

Uncaught SyntaxError: Unexpected number at null:1
Uncaught TypeError: Object [object DOMWindow] has no method 'requestAnimationFrame'
Uncaught TypeError: undefined is not a function at ...

Does the Z-axis position animation trigger GPU acceleration?

position: [0, 0, 0]

will this trigger GPU acceleration?

Is is possible add a method to remove all styles created by snabbt?

Hey there! Great work!!

We are using snabbt in one of our project and so far so good. one small thing. sometimes when doing translation effect on element and reset their position by taking them to 0,0,0. it changes the behavior of elements. like z-index and etc.. so after the reseting transform has been done we remove all inline styles from the elements.

The question

Is it possible to have some snabbt method to clean styles that came from snabbt

Best,

Oak

Opened by mistake

--- by mistake ---

options.callback not invoked for attention style animations

I can see how this can be hard to determine, but looks like you're already handling some equilibriumReached or equilibriumPosition stuff.

ie.this works:

snabbt(element, {
  position: [50, 0, 0],
  springConstant: 2.4,
  springDeacceleration: 0.9,
  callback: callback
});

these do not:

snabbt(element, 'attention', {
  position: [50, 0, 0],
  springConstant: 2.4,
  springDeacceleration: 0.9,
  callback: callback
});

// or

snabbt(element, 'attention', {
  position: [50, 0, 0],
  springConstant: 2.4,
  springDeacceleration: 0.9
})
.then({
  callback: callback
});

Chaining broken: previous states are not set to 'from' when changing 'position' and 'scale'

        snabbt(_this.cursor, {
            fromPosition: [210, 555, 0],
            position: [150, 190, 0],
            duration: 1000,
            easing: 'ease'
        }).then({
            position: [150, 190, 0],
            scale: CURSOR.pressedScale,
            duration: CURSOR.pressedDuration,
            callback: function() {
                _this.drag.style.visibility = 'visible';
                snabbt(_this.drag, {
                    position: [-100, -30, 0],
                    duration: 800,
                    easing: 'ease'
                });
                snabbt(_this.cursor, {
                    position: [50, 160, 0],
                    scale: CURSOR.pressedScale, // here
                    duration: 800,
                    easing: 'ease',
                    callback: function() {
                    }
                });
            }
        });

we need to duplicate scale: CURSOR.pressedScale, cause it will be set to [1, 1] when position: [50, 160, 0], is set.

snabbt dont't work on andriod

in my test snabbt do not work on my andriod phones samsung s3, even simple width animation

Browser Support List

I didn't see a supported browser list other than modern browsers. Can you be more specific such as IE9+ FF32+, etc... would love to save some time in testing if you already have the data.

Use in environment without DOM

Awesome work you've done! Looks very smooth and i'm impressed by the card animations.

I'm using react-native to build native apps in javascript. And it looks like this library is the missing piece for doing exciting animations on mobile.

React Native allows you to use transformMatrix and it should be possible to use your calculations to animate things on native mobile.

Is there a way to let the library calculate the matrix without passing in the very dom element but maybe the time / animationFrame?

Is there a reason I can play animations only one time on mobile?

When I view the docs website on my phone, the animations are awesome! Good job!

I'm wondering if there's a reason I can hit the attention animation button many times on desktop but it'll only play one time on my iphone. Thanks!

Would consider using this for the forms on my mobile site.

Allow adding extra transforms to output

I keep hitting this roadblock using Snabbt, not sure if it's an issue or I'm just missing something.

Problem: if you use CSS transforms that a) you don't want to animate (eg: for positioning), and b) can't be added to Snabbt (eg: percentage offsets) Snabbt clobbers them with it's matrix declaration.

Possible Solution: allow the user to mix in in extra transforms with Snabbt's matrix transform, ie: result could be transform: matrix(...) translateY(-50%) or whatever.

An easy fix for this could be adding a new optional property onto Snabbt, something like staticTransforms: that just takes a string which is appended onto the end of the matrix transform.

Cannot set property 'webkitTransform' of undefined

I include file js in , then i call something like:
snabbt('#btnPostComment', 'attention', {
position: [50, 0, 0],
springConstant: 2.4,
springDeacceleration: 0.9,
});
and console error is:
Uncaught TypeError: Cannot set property 'webkitTransform' of undefined
Can you fix it ?
Thank you

Animations continuing after they should be stopped.

I'm not sure what's causing this, but it seems that if I run different snabbts(?) on the same DOM element in succession, calling 'stop' will reset the element for a moment, but it will then continue running the stopped animation. It could be that I'm not stopping it correctly but it acts more like a bug.

This is the app I made to play with snabbt ( http://kevbost.github.io/kb-meetup-snabbt ) that I'm going to present at our local JS meetup. The Rotate!! button is the culprit I think, it has loop: Infinity set on the animation. It's mostly based around your cards.js doc example.

PS: I'm really loving snabbt. It's useful but most importantly fun to use. Keep up the good work!

KB

Add cdn info

Hi @daniel-lundin,

I'm Peter from cdnjs.com,

I wonder if you would like to add cdn info in the readme or the website?

This is the page we provide cdn for snabbt.js - https://cdnjs.com/libraries/snabbt.js

Thanks!

bower support

bower support please :)

Ease in and ease out are swapped in the documentation

Snabbt and Hammer.js

I working with the drag to flip implementation of the demo (Manual mode).
Finish and rollback work fine since panstop happens when the delta isn't equal to 1 (i.e if I stop swiping before the anim is finished) otherwise animation.finish() is never called and the whole behaviour is broken (breaks the demo)

Thanks