bkwld / tram Goto Github PK
View Code? Open in Web Editor NEWCross-browser CSS3 transitions in JavaScript.
Cross-browser CSS3 transitions in JavaScript.
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.
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;
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';
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.
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
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.
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));
});;
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?
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
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.
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...
Which versions of IE are supported?
@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?
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.
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.
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.
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.
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($('#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()."
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') });
Or make a different callback like stopAndCallThen()
or something
I've just learned that this library is used in Webflow.
Is this project still maintained, ~a year after the last commit?
Like: $('.dude').tram().add() //...
. Kind of like how Hammer.js works
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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.