I'm having a problem with animating transform rotateX and rotateY. I'm using the GSAP jQuery plugin.
Basically executing this:
$(element).animate({transform: "rotateX(-180deg)"});
has the same effect as executing:
$(element).animate({transform: "rotateX(180deg)"});
I do have perspective set up, in case you were wondering.
Is there a special way I have to define negative values or is this a bug?
UPDATE: I have found a property "shortRotationX" and "shortRotationY" mentioned here: http://codepen.io/GreenSock/pen/ydIgf
However this seems to be a temporary workaround. I would like to know what the correct way is to animate rotations with jQuery + GSAP.
Thank you guys!
Kyryll
This was answered in the GreenSock forums at http://forums.greensock.com/topic/9099-cannot-animate-rotate-negative-jquery-gsap/#entry36552
A rotation of 180 is identical to a rotation of -180 in terms of the browser's transform matrix (use getComputedStyle() to see for yourself), so there's no way to truly discern the difference unless you leverage GSAP's native transform properties like "rotationX", "rotation", "rotationY", etc. When you do that, GSAP can track everything properly for you. Plus it's more optimized for speed. So:
//OLD
$(element).animate({transform: "rotateX(-180deg)"});
//NEW
$(element).animate({rotationX:-180});
//or use GSAP's native API:
TweenLite.to("#element", 0.4, {rotationX:-180});
Also, "shortRotationX" is deprecated ever since we came out with DirectionalRotationPlugin which uses a more intuitive syntax that can also be used to specify clockwise or counter-clockwise movement:
//OLD
{shortRotationX:-180}
//NEW
{rotationX:"-180_short"}
//and to specify a clockwise direction:
{rotationX:"-180_cw"}
//or counter-clockwise:
{rotationX:"-180_ccw"}
It should have the same effect. Turning object 180 degrees will be displayed in same way how it will be displayed if you turn it -180 degrees.
I made you a simple example, if it clears you out:
Fiddle here (just HTML & CSS) so you can see that it has the same effect.
div {
width:200px;
}
#rotate1 {
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}
#rotate2 {
height:100px;
background-color:red;
/* Rotate div */
transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Opera, Chrome, and Safari */
}
Related
I'm using a scroll event listener in Javascript to manually position an element when scrolling is done.
myContainerElement.addEventListener('scroll', function (e) {
const transform = 'translate3d(' + this.scrollLeft + 'px,0,0)';
scrollMyElement(transform);
});
Note that scrollMyElement just adds the transform to the element's style.
This works great on Firefox and Chrome, but I'm having issues with Safari. Using scroll wheel/touch pad OR scrollbar, the element seems to lag behind the rest of the page when scrolling.
I was able to fix this issue with the mouse wheel/touch pad by following this solution: DOM element position slow while scrolling + difference between scrollbar-scrolling and mouse/touchpad-scrolling
So in Safari, it works great now with mouse wheel/touch pad, but still lags (just like the example in the solution posted above) when using scrollbar. How can I fix this?!
Things I have tried:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0) in addition for performance
Using all of the vendor prefixed transforms, like webkit, moz, o, ms.
I have the following function that ties into a bunch of different plugin settings, allowing you to configure the handles, speed, and angles for rotating objects. Everything runs crystal clear and really nice in IE9, but firefox is jerky.
// 1. FUNCTION ROTATE ANIMATIONS IN
function rotate_on(degree, index){
clearTimeout(rotateofftimer); /* CLEAR ANIMATION OUT TIMER */
// A. APPLY THE CROSS-BROWSER CSS FOR ROTATIONS
if((ievers==6)||(ievers==7)||(ievers==8)){ if(ievers==8){ /* IE 8 CODE */ current_obj.css({/* IE8 */'-ms-filter':'"progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')"',/* IE<8 */'filter':'progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')'});} else { /* IE 6/7 CODE */ };
} else { /* NON IE */
current_obj.css({/* W3C CSS3 standard */'transform':'translateX(0)rotate('+degree+'deg)','transform-origin':OS.rotate_handle_on_set[index],/* Firefox */'-moz-transform':'translateX(0)rotate('+degree+'deg)','-moz-transform-origin':OS.rotate_handle_on_set[index],/* Chrome, Safari, Mobile, Etc. */'-webkit-transform':'translateX(0)rotate('+degree+'deg)','-webkit-transform-origin':OS.rotate_handle_on_set[index],/* Opera */'-o-transform':'translateX(0)rotate('+degree+'deg)','-o-transform-origin':OS.rotate_handle_on_set[index],/* IE>=9 */'-ms-transform':'rotate('+degree+'deg)','-ms-transform':'translateX(0)rotate('+degree+'deg)','-ms-transform-origin':OS.rotate_handle_on_set[index]});};
// B. TEST FOR REPEAT ROTATIONS - IF VALUES ARE THE SAME, REPEAT ROTATIONS
if(OS.rotate_on_set[index]==OS.rotate_off_set[index]){
// SAVE THE ENDING VALUE TO PICKUP ON NEXT PLAY (IF LOOPING)
OS.rotate_on_set[index]=degree;OS.rotate_off_set[index]=degree; degree++;
}else{ if(degree<OS.rotate_off_set[index]){ degree++ };};
// C. TRIGGER THE FUNCTION IN A TIMER, BASED ON USER SPEED
rotateontimer = setTimeout(function(){rotate_on(degree, index)},OS.rotate_speed_on_set[index]);};
The strange thing is, when I turn the speed down so that the animation is really slow, it's basically jerking through 1 frame at a time in Firefox, but IE9 seems to know how to translate that into a smooth/slow animation. Could it be something to do with the timers?
Thanks!
This just seems to be the way Firefox is. I have the same problem of choppy JS animations and ONLY when viewed with Firefox. Internet Explorer 9 (in standard mode plus compatibility modes "IE7" and "IE8") and Chrome both display smooth animations under all circumstances.
Trust me, we're not the only ones with this problem and to day no clear solution exists.
I have a problem retrieving the exact css property value (in '%') on firefox.
Suppose we have this extremely simple markup:
<div id="box">box</div>
and this css:
#box{
width:200px;
height:200px;
left:10%;
position:absolute;
background:red;
}
and I'd like to retrieve the left position (in '%') by js
It's obv very easy with mootools (demo -> http://jsfiddle.net/steweb/AWdzB/):
var left = $('box').getStyle('left');
or jQuery (demo -> http://jsfiddle.net/steweb/RaVyU/):
var left = $('#box').css('left');
or by plain js (demo -> http://jsfiddle.net/steweb/tUAKA/):
function getStyle(el,styleProp){ //from ppk's quirksmode
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
var left = getStyle('box','left');
But if you try it on firefox (8.0.1) you'll see that the result is not correct (should be 10%, but it's 91px). The questions are: is there a bug on this newer version of firefox? Does anyone knows if it's a known bug? Am I doing something wrong?
Thanks :)
Update: I tried it also on older firefox releases, and it's not correct (it always returns px value).. for completeness, it works correctly on IE
This is documented:
The used value of any CSS property is the final value of that property after all calculations have been performed. Used values can be retrieved by calling window.getComputedStyle. Dimensions (e.g. width, line-height) are all in pixels... etc
There seems to be no way to access "specified" css values for a given element, unless you know exactly which css rule applies and parse out this rule using document.stylesheets or similar interface.
The correct answer is a comment on the bug I filed on bugzilla
https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7
To get the correct % value (on firefox too) the element's (or one of its parents) display should be set to none
Test : http://jsfiddle.net/4RKsM/
The unclear thing is: why on the same browser/version (see, firefox 7 on XP/win7 or Opera 11.5 on mac osx / ubuntu) but on different os, the behav is different?
Btw, the spec #thg435 posted (and reported on mdn) is still in flux.
As I know , it has never shown the percentage (I use ff, opera and chrome). So I think it's not only a firefox problem.
However, you can calculate it manually , but it is just close to the definied value , if the browser window is small.
parseInt($('#box').css('left'))/ $(window).width()*100;
on chrome it depends on the the position value fixed and absolute always give a px whilst other values output what was put in for example if you gave it 10% value then it would output 10% and if you put in 100px then it would output 100px
I'm moving a very long image using -webkit-transform: translate(-958px, 0); animation
The image gets cut off very soon after it starts to move horizontally, but if I slightly move the tablet screen, it redraws the screen and it displays the whole image while panning across and very smoothly too.
But how do I simulate this in code?
Some suggestion:
Provide the tablet model and android version may help
Information like image dimension and size, animation duration, or a demo page on jsfiddle/jsbin will help a lot
Back to the question:
in the performance term, using translate3d will get better performance, since it doesn't work, the main bottleneck is elsewhere.
from my experience with mobile webkit, when there is large image (in term of size or dimension), you may have trouble:
Ram problem
High Network Delay
Long enough loading and rendering time
If your UI-triggered redraw will smooth everything, the lag may be caused by image loading & rendering
Solution:
Set a reasonable delay on your animation by animation-delay or setTimeout
More precise: preload the image, and then trigger the animation when it is done by listening its onload event: jQuery .load explanation on image load event behaviour
If the above not work for you, try it: Force-redraw DOM technique for WebKit-based browsers
For 2 & 3, the code will be like this:
$("<img>")
.attr({ src: " /* image url */ " })
.load(function(){
/* i. use class or animationName to set animation */
/* ii. force redraw go there if needed */
/* wrap i & ii into a setTimeout function inside this callback
if more delay is needed */
})
good luck.
This little snippet of code and blog post from Paul Irish might be helpful to you:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
And it's nearly cross browser if that floats your boat.
Forgive me if I'm not reading your question right.
Are you planning on using the tablet's gyro to pan about a large image? That should be possible in code.
However, forcing a transition to update faster is out of the developer's control, to my knowledge. The best you can do is make sure that that is all the tablet has to worry about.
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding:0px;
overflow:hidden;
}
#img {
position:absolute;
left:0px;
top:20px;
-webkit-transition:left 0.5s;
}
</style>
</head>
<body>
<img id="img" src="img.png" />
</body>
<script>
function onOrientationChange(e) {
var img = document.getElementById("img");
var maxWidth = img.clientWidth - document.body.clientWidth;
img.style.left = ((e.gamma-90) * maxWidth / 180 ) + "px";
}
window.addEventListener('deviceorientation', function(e){onOrientationChange(e)}, true);
</script>
</html>
Have you tried using translate 3d? GPU kicks in when it's used.
HTML5 App/Animation Performance
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Rotating a Div Element in jQuery
How would I rotate a DIV and all the elements inside to a certain degree using jQuery? Like instead of just 90, 180, etc.. I would be able to set it at say 88.
Here is the code for the modern browsers with CSS (applied through jquery for your case)
$('#divID').css({
'-moz-transform':'rotate(88deg)',
'-webkit-transform':'rotate(88deg)',
'-o-transform':'rotate(88deg)',
'-ms-transform':'rotate(88deg)',
'transform':'rotate(88deg)'
});
Have a look at the transform docs property
I think your best shot at this is to use CSS and then use jquery to switch out the css class that is being applied to the object like you can see here : http://answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/
Good luck,
CEC
In HTML, you can't - text orientations different than horisontal and vertical are not supported. If you embed SVG, you can get text rotation there. It has nothing to do with jQuery limitations, it's just how HTML works.
EDIT: Huh. Cool. TIL.
Okay then, just do what they do: set CSS to:
transform: rotate(88deg);
-webkit-transform: rotate(88deg);
-moz-transform: rotate(88deg);
You can do it with
$(element).css({ "transform": "rotate(88deg)", "-webkit-transform": "rotate(88deg)", "-moz-transform": "rotate(88deg)" });
or do it more prettily by stuffing that into a class and invoking $(element).addClass("myObliqueClass").
Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers
* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome
To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation
Where #myImage is the id of the element you want rotated.