bkwld / tram Goto Github PK

Here's my command:

tram($el)
.set({ 'margin-bottom': '10px' })
.add('margin-bottom 300ms')
.wait(i*100)
.start({ 'margin-bottom': 0 });

Error is: Uncaught TypeError: Object # has no method 'wait' hero.js:69

Ran into a case where div was display: none and set() wasn't getting applied before start(). In this particular case, it was a transform property.

Like: $('.dude').tram().add() //.... Kind of like how Hammer.js works

This was mentioned previously, but I had a new idea for how we could handle it.

Technically, in order for start() to do anything at all, .add() must have been invoked to create a transition property.

I propose that when .add() is invoked after a queue has been created, it will also queue the .add() settings. So I think the following would work out well:

tram(elem)
  .add('width 1s')
  .add('height 2s')
  .start({ width: 400, height: 200 }) // queue is created here
  .add('height 500ms') // this will happen after start() is ended
  .then({ height: 20 })

I think it makes sense that anything after .start() should be considered part of the queue.

cc @rvratner @weotch @mattaebersold

I've been working on a project and I almost decided not to use tram because of its lack of matrix transforms. Currently, when I ask the browser for what 3d transform is applied, it will give me a matrix3d or matrix string. If we are to support .get in the future, it seems logical that matrixes should at least be an option for power users.

Ps, it is almost trivial to make a .get for the various transforms when matrixes are used.

tram($('li')).add('width 2s').start({width:'100%'}).then(function(){ console.log('fired'); });

'then' is never fired. It seems to be an issue specific to collections, since it works as it should with single items. Also, the transition is applied to the whole collection as it should be, it just does not trigger 'then' afterwards.

cc @josephschmitt

Would need to add a feature detect for this, and implement a property class similar to Transform.

Feature detect from modernizr:

// https://github.com/Modernizr/Modernizr/issues/615
// documentMode is needed for false positives in oldIE, please see issue above
Modernizr.addTest('cssfilters', function() {
    var el = document.createElement('div');
    el.style.cssText = Modernizr._prefixes.join('filter' + ':blur(2px); ');
    return !!el.style.length && ((document.documentMode === undefined || document.documentMode > 9));
});;

See https://code.google.com/p/chromium/issues/detail?can=2&q=requestAnimationFrame&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&id=268586&thanks=268586&ts=1375738123

I'd like this to work:

    $(this).tram()
            .set({opacity:0, top:-3})
            .add('opacity 400ms')
            .add('top 400ms ease-out')
            .wait(i*80)
            .then(function() { this.start({opacity: 1, top: 0}); })
            .wait(500)
            .then(function() { this.start({opacity: 0}); })
        ;
    });

I tried putting the second wait() inside of a then() but that didn't work. What I'm seeing is the first then() running but not the second.

Or make a different callback like stopAndCallThen() or something

For some reason, the units of transform sub-properties aren't tracking properly, so you end up with warnings like this (when using non-default units):

Units do not match [tween]: 3deg, 6rad 

The set method doesn't work unless a transition has been added for that property, which seems weird since set occurs immediately without any transition.

After using tram on an actual project this weekend, I had some ideas about delays and durations.

1st, a delay in between queue steps is a must. I think wait() works nicely for this. I can alias it to "delay" if enough people prefer that.

tram(elem)
  .start({ opacity: 0 })
  .wait(2000)
  .then({ opacity: 1 })

2nd, I thought it would be nice to manually set the step duration for each step in the queue. For example, say you have opacity set to 1s, and width set to 400ms. Currently, Tram would wait for 1s, because that's the longest duration in that step:

tram(elem)
  .add('opacity 1s').add('width 400ms')
  .start({ opacity: 0.5, width: 100 }) // this step would take 1 second.
  .then(something)

But we could introduce a span virtual property to control how long to wait before going to the next step:

tram(elem)
  .add('opacity 1s').add('width 400ms')
  .start({ opacity: 0.5, width: 100, span: 500 }) // this step would take 500ms 
  .then(something)

Does span make you think too much about the dom? Should we call it time instead? I'm trying to keep it very separate from duration because that means something else entirely.. and I don't want new users to get confused about how this feature would compare to a traditional tween library like jquery.animate.

cc @josephschmitt @jeremiak @weotch

Take this example:

this.$download = $('#download');
tram(this.$download).show().set({ y: this.$download.height() * 1.5 })

If #download doesn't exist, I'm getting this JS error:

Uncaught TypeError: Cannot read property 'style' of undefined , tram.js, line 538

I personally think Tram should shrug and move on rather than throwing a fatal error.

tram($('#main')).add('width 10s linear').start({width:'50%'}).then(function(){ console.log('success'); });

Works as it should, without any issues except on collections. However, the chain returns a warning in Firebug:

"No active transition timer. Use start() or wait() before then()."

@danro I was thinking of ditching the Makefile since it's just aliasing some simple grunt tasks. We could even make a custom task to do the build work to make it simpler to call, like grunt compile. Got any problems with that?

The following example did not work on Chrome Version 34.0.1847.137 m
http://bkwld.github.io/tram/examples/transforms.html

It did work on Firefox and IE11... I`m not sure if it was a problem with my chrome, but I believe is worth to report it...

Which versions of IE are supported?

Macros should be reworked a bit.

Instead of strings, I think they'd be more useful like this:

tram(element)
  .start({ x: 200, opacity: 0 })
  .then(tram.hide);

or

tram(element)
  .start(tram.slideDown)
  .then(tram.slideUp)
  .then(function () { console.log('done') });

Was using TweenLite recently and it's kind of nice how they deal with the time specification. I didn't look at their source to see EXACTLY what their breakpoint is on this, but if you give a number for the tween duration that is like < 20 or something, it's treated as seconds. Otherwise, it's ms. So;

• time: .3 // That's seconds
• time: 300 // That's ms.

Looks like desktop Safari has an annoying flickering bug when setting transitions via JavaScript -- even with GPU cache tricks in place. More details: here and example here

Because of this, and questionable flickering / performance in Firefox, I may have to add UA sniffs to force tween fallback mode in certain browsers.

Is there any gpu layer management or creation going on in the background? Or do we manage that as users of the library? I noticed you have transforms and z listed...

I've just learned that this library is used in Webflow.

Is this project still maintained, ~a year after the last commit?

Here's some example code:

    var w = this.$el.width(); // IE9 wouldn't let me set width to 100%
    this.$hr.tram()
        .add('width 200ms ease-out')
        .wait(1000)
        .then(function() { 
            this.start({ opacity:1, width: w }).then(function() {

                // Set the width to auto so it's responsive
                this.set({width: 'auto'});
            });
        })
    ;

this.set({width: 'auto'}); is causing:

Type warning: Expected: [number(px) or string(unit or %)] Got: [string] auto tram.js:1450

But I think that this is a valid use for set. Thoughts?

SVGs are not the best choice for animation, but I'd like to experiment with this neat trick for drawing lines:

From: http://jakearchibald.com/2013/animated-line-drawing-svg/

var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';