Sun 10 Dec 2006
I’ve released an update to Animator.js.
Highlights are:
- You can now specify the start and end states of an animation using CSS class names: no more style information in your JavaScript code! IMHO this makes it twice as useful as the last version.
AnimatorChainclass makes it easy to chain several animations together (thanks Lachlan Donald and Colin Snover for the idea)- No more dependency on Prototype.js, so users of other toolkits can use it freely.
- Useful new transitions: elastic, bouncy and Attack Decay Sustain Release.
- Bug fixes - styles can now have negative or fractional values
Thanks to all the people who wrote to me with suggestions and example of work you’ve done with Animator, keep them coming!
December 12th, 2006 at 2:12 am
Nice library just one slight problem on Opera… whenever a box goes left after an effect it leaves a nasty top border. Example ex16 however the problem does not appear.
Just thought I would let you know and I look forward to using your script.
December 12th, 2006 at 4:55 am
Hey wow, that was quick. Thanks, mate. :)
I’m working on my real site, which you can preview at http://zetafleet.com/new/. It’s only working 100% in Firefox right now, but works most of the way in Opera and Safari WebKit and even IE7.
I’m probably doing some stuff I shouldn’t be, like accessing this.subjects[0].subjects[0].els[0] on onComplete as an easy way to remove elements from the document when their animation is done without having to store extra references to them. (By the way, this does not work in IE. The second subjects array is blank. Any thoughts why? Safari also seems to have problems with this.) I’ll probably change this method to something more reliable down the line, but I was lazy and it worked for what I needed at the time… :)
Cheers,
December 12th, 2006 at 5:19 am
Arg. Forgot something. Or things.
The padding problem I was having (http://www.berniecode.com/blog/2006/11/05/moving-animatorjs-forwards/#comment-29) occurred during development of the site linked in my previous post. When I set window.DEBUG = true, I received alerts about invalid value ” for padding, border, etc.
Also, if you look at the Animator.js, I had to hack a fix in for calculating width and height of elements because for some reason Opera (9.02) was returning 0px. I don’t know how reproducible that problem is, and it’s probably simply an Opera bug. I’ll start working with the new version and see if it’s fixed.
Cheers,
December 12th, 2006 at 11:37 am
ste - This sounds like a similar problem to one that I got in Firefox, in which case it’s actually a browser rendering bug. If you can’t get the problem to go away by using a different CSS property then as a last resort you can put an onStep action that removes and re-inserts the element from the DOM on each frame, to force the browser to completely re-render the element. See the fireFoxRenderingBugFix function on the source of my home page for an example. Strangely, IE seems to have the fewest rendering bugs on animation.
December 12th, 2006 at 11:46 am
Colin - congratulations, I think that’s the coolest example of Animator.js usage I’ve seen!
As for the width problem, it might be an Opera bug but another possible reason for this would be if the element you’re animating does not have a specific width applied with CSS, for example if you specify the width and height of an image with html attributes instead of CSS.
That’s not an excuse however - it should work anyway. I’ll add your fix to the next version.
December 12th, 2006 at 8:31 pm
Hey bernie,
Thanks for the kind words. I’ve had to discard the throbbers over the images for now in order to prevent myself from being driven completely crazy. I’m pretty sure it’s an Opera bug since the element being tested does have a width and height specified in CSS. Fortunately, offsetWidth/offsetHeight are supported by everything in the world now even though they aren’t part of the formal DOM, so it works out OK.
Also: the opacity fix for MSIE is only applied to NumericStyleSubjects, not CSSStyleSubjects.
Let me know if you want me to actually try providing fixes for problems every once and a while instead of simply reporting them to you, too. The lovely thing about Animator.js is that it’s robust enough that if one method doesn’t work there seems to always be a second that does. :)
Cheers,
December 12th, 2006 at 11:39 pm
HI ! Thanks for the small footprint animation js. It works killer on your site, but i am having troubles making it work for me.
Could you post a simple instruction list of what’s needed for a minimal install? Or make your download as a zip with an html page with a sample? Your page’s source works when downloaded but when I strip out all but one ID, things dont work.
I am getting an “el has no properties” error.
thank you, Brent
December 13th, 2006 at 12:18 pm
Hi brent. “el has no properties” sounds like a problem with the toggleSample function on the page, i.e. a problem with my demo page, not with Animator.
I guess the error happens when you click one of the buttons below a sample right? You have probably removed the ID of the div that contains the source code that you are trying to run. The toggleSample function finds the div with the example source code and runs it (thereby guaranteeing that my examples don’t contain typos - very clever). If you remove the ID, you can’t run the example.
If that’s not the problem, email me, attaching the source code - bernie @ [this website].
December 13th, 2006 at 5:28 pm
Hey Bernie,
I have an idea I’d like to use this for (I’m just a lowly designer and don’t understand js…) - but - I’m trying to collapse a div - in one version, it’s natural height (auto?) –> to a collapsed height with overflow: hidden. Meaning - I’m trying to hide *some* of the content, but not all (complete collapse). I’ve found that animator.js can’t interpret height: auto. Have any ideas?
Thank you very much!
Dave
December 13th, 2006 at 9:57 pm
Hi David,
Animator can only be used on properties that scale with numeric or colour values, so the trick is to find a numeric property that will produce the effect you’re looking for.
What you should try is setting the overflow to hidden and animating the width and height of the element. If you know the size of the content then you can just animate from that to the smaller size. If you don’t know the size of the content you can find it out by setting the div to auto, then reading the offsetWidth and offsetHeight properties of the div.
If you have trouble getting it working, put a test page online and I’ll have a look for you.
And there’s nothing lowly about designers!
December 14th, 2006 at 1:24 pm
Hey, Bernie.
I’ve been looking at the library, and it looks really nice. Especially the class-to-class transformations. Not seen that in any other lib.
I was trying to dig up your email address, but I’m either blind or it’s not on your site. And the phone number on the “hire me” page is without a country prefix. Could you perhaps update your contact info, or get in touch with me directly?
Cheers.
December 14th, 2006 at 6:59 pm
I’ll update the home page, but in the mean time my email is bernie @ [this website], and the country prefix is +44 (UK) and skip the leading zero.
December 17th, 2006 at 1:14 am
Hi Bernie,
Nice piece of work :-)
When doing some tests, I found that the CSSStyleSubject constructor doesn’t handle the fractional ‘opacity’ attribute correctly. For me, the following fix worked, but be warned - this has not been tested thoroughly.
} else if(match = CSSStyleSubject.numericalRe.exec(fromStyle[prop])) {
from = parseFloat(fromStyle[prop]);
to = parseFloat(toStyle[prop]);
…
Cheers!
December 17th, 2006 at 1:52 am
Thanks csg, I’ve fixed this in the release version.
December 19th, 2006 at 5:10 am
Hi Bernie,
Hope everything’s getting on well. Just wanted to tell you that on the example page for Animator.js, the “Home” link at the top of the page is currently linking to “Documents%20and%20Settings/Bernard%20Sumption/Desktop/animator/”. Shock and horror! ;)
Cheers,
December 21st, 2006 at 1:25 am
Quelle horreur! My Windows usage exposed to the world!
Fixed now…
January 17th, 2007 at 10:16 pm
I need to know how to stop an animation before it’s finished playing, so that I can start another animation on the same element. Is this possible?
Use case: tool tip div which fades in on mouse over and fades out on mouse out. If I move the mouse too quickly to the next hot link and start a new fade in animation before the fade out is complete, it blinks all schizo like… I know scriptalicious does this but I don’t want to go back, I like The Bernie’s animator too much!
January 18th, 2007 at 9:15 pm
Why thank you Eric!
What you’re looking for is the seekTo(pos) method, which causes the Animator to play towards a certain position without resetting the current position.
el.onmouseover = function() {anim.seekTo(1);}
el.onmouseout = function() {anim.seekTo(0);}
I’ve updated the samples page to include some examples.
January 21st, 2007 at 7:25 am
Great Effects, the only thing is seem to not be possible to do a mouseover by wapping background-image from the css. Is it possible, just curious?
January 21st, 2007 at 4:22 pm
If you mean animating from background-image:none to background-image:url(foo.jpg) then no, because you can only animate numeric or colour properties.
However, you can probably get the effect that you want by using an image element and animating its opacity, as in the opacity example in the article.
January 22nd, 2007 at 11:53 pm
Hi Bernie, thanks for the help. Is it possible you do a simple sample with a mouse over effect with a background image. Im pretty new to javascript. thanks
January 23rd, 2007 at 10:51 pm
This in the HTML:
<img id=foo src=foo.jpg>
This in the script:
var i = document.getElementById(”foo”);
var a = Animator.apply(i, [”opacity:1″, “opacity:0″]);
a.play();
January 26th, 2007 at 7:36 pm
Bernie,
I ended up writing an AnimatorSeekChain object based on your AnimatorChain object, but that allows one to use seeks instead of setting state to 0/1 (which caused flickers for me). See if it’s useful:
http://pastie.caboo.se/35879
January 27th, 2007 at 1:20 am
Nice. I think I’ll change the default behavior to this.
February 23rd, 2007 at 4:52 am
Hey dude, great script. :)
One thing though - in the accordion function, you use innerHTML. Wouldn’t it be better to use createTextNode to make it XHTML compliant.
Cheers.
February 23rd, 2007 at 9:35 am
Good question.
innerHTML is only used for the remembrance feature, where it uses the inner HTML of a header element to append to the URL in a #fragment-identifier so that the currently selected page is bookmarkable.
It’s read and not written, so createTextNode wouldn’t work, and I was too lazy to use a recursive DOM innerText replacement algorithm since every real browser supports innerHTML.
I’ve never really liked XHTML anyway. Mangos excite me, not trucks
April 6th, 2007 at 11:38 am
Maybe I am being a bit thick, but I can’t see a version number. If there isn’t one, then adding one would really useful. Amazing work btw.
Thanks
Tom
April 6th, 2007 at 11:52 am
Good idea, I’ll add one. I haven’t been too hot with release management on Animator, probably because it started as a little demo script and morphed into a product.
I have also been taking the Torvalds view that only wimps use [source control] _real_ men just upload their important stuff on ftp, and let the rest of the world mirror it.
April 6th, 2007 at 2:26 pm
Opacity doesn’t seem to work on CSSStyleSubject
April 9th, 2007 at 10:59 am
Are you passing in CSS class names and using IE?
The CSS class name handling works by applying the classes to the elements, and reading back their rendered styles. Since IE doesn’t actually support opacity, this won’t work.
Try passing in a CSS rule instead:
var a = Animator.apply(el, [”opacity: 1″, “opacity: 0″]);
This passes the ‘opacity’ rule directly into NumericalStyleSubject which will convert it into a filter:alpha(X%)
June 29th, 2007 at 4:46 pm
Hey Bernie,
I noticed that when I used opacity in IE to show a menu the fade in would work the first time but not the second. The menu would just show after the duration of the animation was reached. I think I found where the problem is.
In the setState method in NumericalStyleSubject there is a visibility variable but from what I could tell, it wasn’t being used. I added 3 lines inside of the for loop to use the visibility variable (I changed the property check from opacity to filter) and it fixes the problem.
var visibility = (this.property == ‘filter’ && state == 0) ? ‘hidden’ : ‘visible’;
var j=0;
for (var i=0; i 20) return;
}
There may be a more efficient way to do this but for now this works.
Love the animator, it’s the best!
June 29th, 2007 at 4:49 pm
Looks like the for loop got munged in my above post. I’ll try once more, but if the code doesn’t show, that’s fine. I’m sure you know what I’m talking about.
for (var i=0; i 20) return;
}
July 10th, 2007 at 2:40 pm
hi there, im not sure if there’s something really basic that im not understanding here, but my problem is this; i have a bulleted list of links, and im wanting to apply a hover property to each of the links within it. i can make the hover work when i have a specific id on the anchor tag within the ul li, but clearly i cant have the same id on all the links as it isnt valid, nor does it mean i can apply this behaviour to new links without adding the id to them as well. Does animator.js only work when used on a specific one-off element? i’ve tried to find answers to this, but i cant seem to find any documentation/forums…cheers.
July 10th, 2007 at 2:49 pm
I think I see what you’re getting at.
Although you can pass multiple elements into a single Animator, the Animator will apply the same animation to every element passed into it, therefore when you pass in an array of link elements they will all be animated in chorus.
If you want to animate each one individually, loop over the array and construct an Animator object for every link element.
Does that work?
July 10th, 2007 at 3:13 pm
“If you want to animate each one individually, loop over the array and construct an Animator object for every link element.
Does that work? ”
im pretty rubbish at scripting, but im gonna give this a go and see if i can make it happen. cheers.
July 10th, 2007 at 3:33 pm
i guess all i’m trying to do is this;
http://demos.mootools.net/Fx.Styles
which i’m able to achieve in seconds with mootools, but doing it in animator just confuses. like i said, im no scripter, but im usually pretty good at working out what things do when i’ve some source example to pick apart /break etc. i really love the way you’ve done animator, and i’m using it elsewhere on my new site, but if i could work out how to do this in animator, then i’d have no need for mootools at all.
if there’s something major that im not getting, then please clue me in. otherwise i’ll need to use mootools for the time being. keep up the good work man, this is good stuff.
dave.
July 10th, 2007 at 3:47 pm
mootools includes CSS selector code that Animator does not have. If you want to easily apply an animation to many elements, use a library that provides CSS selectors. Using prototype for example:
$$(”#someDiv a”).each(function(el) {
var a = Animator.apply(el, [options]);
el.onmouseover = a.seekTo.bind(a, 1);
el.onmouseout = a.seekTo.bind(a, 0);
});
If you’re not sure how to traverse the DOM and build an array of elements, I suggest you save yourself a headache and use prototype as above or even just use mootools if it works for you.
Good luck!
July 10th, 2007 at 4:21 pm
“how to traverse the DOM and build an array of elements”
i’m gonna make this the next thing i try and learn. seems like it’d be a useful thing to know how to do for all aspects of website development. thanks for the advice, i look forward to using animator as much as possible elsewhere on my site. like i said, it was a joy to use up until that point where i became unsure if i was able to do what i wanted. (at which point it was still a joy to use, i was just stuck ;))
again, keep up the good work dude, this is a sweet thing you’ve made here. good luck for the future.
August 9th, 2007 at 10:12 am
Very cool examples, but I don’t get it. I’m trying with a minimal example like the following, but it doesn’t work (or am I doing something very wrong?)
—-
var ex18;
function $(id) {
return document.getElementById(id);
}
.greenish {background-color: #3F9;}
How’s this for one line of code?
—
the “saved from url” stuff is used to avoid IE to complain about page containing scripts when it’s opened locally
August 9th, 2007 at 10:14 am
oops, it ate it up (including the style tags):
How’s this for one line of code?
August 9th, 2007 at 10:15 am
anyway, can you post a minimal example that one can download and try locally for the ex18=Animator.apply($(’ex18Button’), ‘greenish’) syntax?
August 9th, 2007 at 10:19 am
Post the page you’re having trouble with on the Internet and mail me the URL, I’ll see what I can do.
August 9th, 2007 at 10:24 am
Silly me, I had forgotten to call ex18.toggle(), so that should be it. You could remind this near the end of the document since by reaching the end of the article one may have forgotten it (add a sum-up paragraph at the end with some bullets or 1-2-3 steps something)
congrats again,
George
August 9th, 2007 at 10:39 am
btw, could I define offsets at the target CSS string? If I use “left:-10″ it goes to -10, not to offset -10 compared to current pos. I’d like to have a rectangle that moves away from the mouse by say (-10,-10) at mouseOver event
August 9th, 2007 at 10:42 am
if CSS syntax doesn’t support this (not sure if it does somehow alreay), you could add a “targetIsOffest” boolean param to treat the target CSS style values as offsets (for numbers and colors it should work fine to treat them as offsets instead of values, but for bold/italic not sure what it should do in that case, maybe just do as usual)
August 9th, 2007 at 10:51 am
You can get this effect by animating ‘margin-left’ from 0 to -10, which will shift the box relative to its position set with ‘left’.
August 9th, 2007 at 5:07 pm
Hey Bernie,
I’m a javascript novice and more of a designer, but I would like to start using a javascript library for animations, after looking around I think I would like to use Animator because of the ability to animate based on CSS classes (I absolutely love the idea there)
The problem is I have not been able to create even a test page that runs the animations. I get no errors but no animations either. Hopefully there is just something I have not realized I was supposed to do because of my lack of javascript knowledge.
here is one such test page test.php
August 9th, 2007 at 5:15 pm
If you run a script in the head section it won’t have access to the elements in the body. Move the script to the end of the body, or put it in a window.onload=function(){ /* script here */ } block.
I hope that helps.
August 9th, 2007 at 5:17 pm
Thanks!
August 9th, 2007 at 5:20 pm
Tanner, I see you miss var ani; before you use the ani variable, maybe it plays a role on whether the variable will persist outside the script block (has been many-many years since I read netscape’s javascript manual). Also you seem to be missing the definition of the “right” function
August 9th, 2007 at 5:22 pm
Some interesting stuff:
http://www.robertpenner.com/easing/
see the “Equations visualizer” link, you select a function there and then click somewhere away from the ball for the ball to move there using the selected function
(could implement all these maybe with animator - similar or with ADSR)
he also has a free book chapter about it online there, plus can download the code as actionscript
found the link at
http://ajaxian.com/archives/animatorjs-animations-using-css
(mentioning there that this code is also ported to MooTools/javascript)
which discusses this page
August 10th, 2007 at 3:44 pm
>You can get this effect by >animating ‘margin-left’ from 0 to -10, >which will shift the box relative to its >position set with ‘left’
the thing is that at next mouseover, it will do the same effect and not do margin-left from -10 to -20 this time as I’d like
it’s unfortunate that they don’t have “offseting” CSS values (since they’re cascading rules they should I think). I do think it would help to add this (for color offseting too)
August 10th, 2007 at 3:56 pm
That’s just the way that Animator works - when you define an effect, it is the same each time it plays.
However it’s easy to do what you’re describing: just create the animator inside the moveLeft() function so that a new one is created with each call. Use NumericalStyleSubject instead of a CSS string and pass in a lower number each time:
1st call: new NumericalStyleSubject(el, “width”, 0, -10);
2nd call: new NumericalStyleSubject(el, “width”, -10, -20);
… etc …
Remember to store your Animator globally (window.myAnimator = new Animator(…)) so that it does not vanish when the moveLeft() function finishes.
September 6th, 2007 at 6:16 pm
Best way to move an Element over a Path (2D-function)? (circle, ellise, linear, sin, cos…)
This type of Animation is not linear (as NumericStyleSubject) and move over two coordinates (X and Y)
Thank you
September 7th, 2007 at 9:59 am
A more flexible solution:
One Transition function per Subject instead per Animation. This allows multiple Transitions on same Animation.
for example: with images and movements…
· an image moves linear
· other image jumps (with elastic)
· third moves over a ellipse
of course this can be used to fade, resizing, marging…
September 10th, 2007 at 11:36 pm
Jose; to your first post:
Motion in a 2D space can be broken down into 2 separate motions, one for X and one for Y. You might need 2 different Animator objects animating the same object.
To move an object in a circle, you’d set up 2 similar Animators, one animating ‘x’ with a sin function for easing, and one animating ‘y’ with a cosine for easing.
If you find yourself doing this a lot, write your own Subject class to provide the motion in a single Animator.
To your second post:
It is indeed more flexible to have multiple easings but I only really have time to work on one open source project at a time, and currently it’s making a better version of Animator.js for Flash. You’ll either have to use multiple Animator objects, or modify Animator.js to do this (and send me the modification if you want me to merge the changes back into the main release)
April 8th, 2008 at 5:14 pm
Bernie - wow. really some of the nicest looking effects I’ve seen. I’m a real real REAL newbie at this, and tried to get ex15 to work (or any of them in fact) but lack the know-how to get the code to execute.
Could you please (email is good) send me a single page with all the required scripts included - (I can edit the styles myself if need be) - for ex15.
I dont quite get WHERE/HOW to use the code (even a downright copy!)
Just so I can get to grips on how to use these effects. I am looking forward to being able to put together a little page…..
April 9th, 2008 at 9:56 am
if a code sample is:
ex15 = new Animator(…);
Then start the animation with the code:
ex15.toggle();
If you want the animator to start on a button click, put the above line in an onclick=”ex15.toggle();” attribute on a button.
Make sure that the two lines are either in a script tag AFTER the elements you are trying to animate in the page, or in an onload event.