Skip to main content

Bug Tracker

Side navigation

#4171 closed feature (plugin)

Opened February 17, 2009 06:33AM UTC

Closed July 11, 2011 06:18PM UTC

Last modified March 14, 2012 03:06PM UTC

Allow animation of CSS Transform Properties

Reported by: zachstronaut Owned by:
Priority: low Milestone: 1.next
Component: effects Version: 1.6.1
Keywords: css,transform,animate,animation,1.7-discuss Cc:
Blocked by: Blocking:
Description

WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:

$('p').click(function () {

$(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);

});

For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:

$('p').click(function () {

$(this).animate({transform: 'rotate(15deg)'}, 1000);

});

Attachments (0)
Change History (26)

Changed March 11, 2009 05:06PM UTC by dantman comment:1

jQuery won't add support for this since it doesn't work cross browser.

I have plans to improve jQuery to support extension of .css(); after I code that I'll be making an extension to add borderRadius support, and potentially transform support. I'll probably also end up setting up support for transform animation.

Note that transform isn't something very easy to animate, there are a number of possible transformation types (matrix: rotate, translate, scale, skew) and just like in matrix transformations these build on top of each other in complex ways.

Animating 'rotate(25deg)' to something like 'transform(25px,25px) rotate(50deg)' might not be to simple. I'll have to do some testing.

Changed November 10, 2010 06:34PM UTC by ajpiano comment:2

resolution: → wontfix
status: newclosed

This canm now be accomplished with a plugin that leverages jQuery's new cssHooks implementation. That is how jQuery plans to support CSS3 going forward, rather than inclusion in core.

Changed May 22, 2011 07:04PM UTC by john comment:3

milestone: 1.3.21.next
resolution: wontfix
status: closedreopened
version: 1.3.11.6.1

Re-opening for 1.7 discussion.

Changed May 22, 2011 07:27PM UTC by john comment:4

keywords: css,transform,animate,animationcss,transform,animate,animation,1.7-discuss

Nominating ticket for 1.7 discussion.

Changed May 22, 2011 09:57PM UTC by dmethvin comment:5

+0, Needs to be part of an overall .animate() rewrite with CSS3 animations in mind. Not sure if this is the right time to do it.

Changed May 22, 2011 10:31PM UTC by rwaldron comment:6

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \

+0, Seems like a lot of code. Could this begin life as a plugin?

Changed May 22, 2011 11:40PM UTC by jaubourg comment:7

+0, I think we should simply cssHook these properties (without the transform key, let's use "rotate" and "scale" directly)

Changed May 23, 2011 01:43AM UTC by ajpiano comment:8

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \

-1, Should use cssHooks - moreover, how does it even make sense to "animate" the property that defines a CSS transform...

Changed May 23, 2011 02:41AM UTC by timmywil comment:9

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \

-1, cssHooks

Changed May 23, 2011 03:05AM UTC by zachstronaut comment:10

Why does animating the CSS 'width' property belong in jQuery core but animating the CSS 'transform' property should be cssHooks? This sounds completely arbitrary to me. It also seems very shortsighted. CSS Transforms are now supported by IE9+, Opera, Firefox 3.5+, Chrome, and Safari, and they are exactly the kind of thing that cutting edge web developers and designers are going to want to include and to animate in their designs.

Also, CSS Transitions and Animations will soon make redundant all of jQuery's animation functionality. If you're going to exclude support for some CSS properties in jQuery core, maybe all of jQuery animation should be removed from core and stand alone as a plugin to reduce the weight of jQuery.

The demand for CSS Transform support is going to grow exponentially, so it is hard to argue for it being excluded from jQuery core on grounds that it is too niche. If you want to argue that it is acceptable for people to include it as a plugin, then why not make all of jQuery animate a plugin for those of us who don't need any of the animate functionality on some projects.

@ajpiano How does it not make sense to animate a CSS transform? I do it all the time with my jQuery patch that enables this: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

Changed May 23, 2011 05:35AM UTC by addyosmani comment:11

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \

-1, only because as per dmethvin this should probably be done as part of a wider re-write of .animate() to use CSS3 transitions, whether addressed on this roadmap or the next.

Changed May 23, 2011 03:18PM UTC by danheberden comment:12

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \

-1

Changed May 23, 2011 05:14PM UTC by paul.irish comment:13

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \

+0, I really want this functionality and want it in jQuery.. but it's a poor choice to use DOM based animation on transforms. They should always be animated with transitions.

Dunno if there's a ticket for moving animate() to transitions but that's the one that needs to happen.

Changed May 24, 2011 12:24AM UTC by timmywil comment:14

status: reopenedopen

I agree with paul and adam that DOM based animation shouldn't be used on transforms, but I don't think it will be possible to convert animate to transitions. IMHO, javascript animations should be done with javascript, hence the existence of requestAnimationFrame. They will always be needed in every browser even if not in every situation.

I foresee far too many collisions, as well as supremely bloated code, if we tried to do css transitions for the situations where it would work. The only benefit I see in adding css transitions with javascript is so you don't have to worry about all of the different prefixes, but I think that's really more a job for scss, sass, a plugin, or a separate function from animate. Not a good enough reason to switch.

Changed June 03, 2011 01:07PM UTC by john comment:15

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \

+0, I think most of this can be handled by plugins (although, I admit, it would be nice to have some of this API integrated into our own).

Changed June 03, 2011 02:05PM UTC by scottgonzalez comment:16

-1, This should be possible, but outside of core. I actually plan on tackling this in jQuery UI.

Changed June 04, 2011 10:14PM UTC by addyosmani comment:17

-1

Changed June 06, 2011 03:33PM UTC by jzaefferer comment:18

-1, eventually jQuery should support CSS transforms, but not this way

Changed June 06, 2011 05:57PM UTC by lrbabe comment:19

description: WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:\ \ $('p').click(function () {\ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);\ });\ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:\ \ $('p').click(function () {\ $(this).animate({transform: 'rotate(15deg)'}, 1000);\ });\ \ WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari: \ \ $('p').click(function () { \ $(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000); \ }); \ \ For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as: \ \ $('p').click(function () { \ $(this).animate({transform: 'rotate(15deg)'}, 1000); \ }); \ \

For the record, we already have a cssHooks that works fairly well: https://github.com/louisremi/jquery.transform.js

Changed June 07, 2011 06:53PM UTC by rwaldron comment:20

milestone: 1.next1.7
priority: majorlow
resolution: → wontfix
status: openclosed

Closing per 1.7 roadmap meeting resolution

Changed June 11, 2011 05:00PM UTC by rwaldron comment:21

milestone: 1.71.next
resolution: wontfix
status: closedreopened

Yehuda just gave a compelling presentation at TXJS that addressed the hope that jQuery might take this on. I'm re-opening for 1.next discussion.

Changed June 11, 2011 06:43PM UTC by addyosmani comment:22

_comment0: I previously wrote about this in the pre-vote version of the roadmap spreadsheet, but I would seriously consider reviewing lrbabe's work on transforms and .animate(). They may prove useful here. Here's to hoping we can actually land something in 1.next for it :)1307817869892972

I previously wrote about this in the pre-vote version of the roadmap spreadsheet, but I would seriously consider reviewing lrbabe's work on transforms (and transitions) with .animate(). They may prove useful here. Here's to hoping we can actually land something in 1.next for it :)

Changed June 13, 2011 02:58PM UTC by timmywil comment:23

status: reopenedopen

Changed July 11, 2011 06:18PM UTC by john comment:24

resolution: → plugin
status: openclosed

This isn't something that we're going to fix, per discussion in the jQuery 1.7 roadmap meeting:

http://docs.jquery.com/Won%27t_Fix

Changed July 11, 2011 06:33PM UTC by zachstronaut comment:25

Of course, you're right Paul. The irony is that all the browsers that support CSS transitions/animations will also support things like querySelectorAll(), addEventListener(), etc. and are across the board much more uniform. Much of jQuery suddenly could be paired down into many, many fewer lines of code... and some of the jQuery APIs become obsolete entirely. Looking towards future compatibility, here's where I see the real JS library needs:

-object/class management (things like $.extend or other patterns)

-dynamic animations (although in many, many cases this should be being done with CSS transitions and animations that are triggered by toggling classes)

-simple selecting and modifying attributes and classes on DOM nodes (see above)

-custom event firing and listening

-UI widgets (with preference towards widgets that are smart enough to work on desktop and mobile i.e. they use transforms, transitions, and animations and have different styles depending on css media queries against screen size)

Zach

Replying to [comment:13 paul.irish]:

+0, I really want this functionality and want it in jQuery.. but it's a poor choice to use DOM based animation on transforms. They should always be animated with transitions. Dunno if there's a ticket for moving animate() to transitions but that's the one that needs to happen.

Changed January 30, 2012 09:46PM UTC by CaptainN@unFocus.com comment:26

There is already an implementation that I didn't see noted in this thread - it answers the quesion of whether it can be done in a plugin:

http://playground.benbarnett.net/jquery-animate-enhanced/