My Velocity.js animation is being reverted to stylesheet defined values after completion by removing style attribute. I've checked all in docs, there isn't anything that gives me a clue.
Simple enough, span is styled like this:
.csstransforms3d #naslov h1 span{
display: inline-block;
-webkit-transform: perspective(400px) rotateX(90deg);
-moz-transform: perspective(400px) rotateX(90deg);
-o-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
}
and animated with this:
$.Velocity.hook( $('#naslov h1 span') , "rotateX", "90deg");
$('#naslov h1 span').velocity({rotateX:'0deg'},3000)
I'm watching my animation in dev tools. Everything goes fine, transform: rotateX is gradually lowering it's value in style tag of a span and - boom, whole style tag is gone once rotateX reaches 0;
Does anyone know what's going on here?
If I'm not mistaken, the default behavior of Velocity is to remove transforms with null-like values, see here.
The problem is that your end value is 0deg which is the basically a null rotate transform.
Not sure this will work, but I think if you simply add 360 to all values you could trick the system into not cleaning the transform:rotateX at the end.
Update:
As per #Miloshio's comment it's better to add 0.01 to all values instead of 360 (not tested).
Related
Currently i am running CSS based ken burn effect using opensource code https://codepen.io/anon/pen/VzYRWV
I would like to know how to get the current image which is getting displayed in text box shown in the above demo.
Thanks for your kind help.
Try these CSS effects https://jsfiddle.net/ipsjolly/cugLbrfu/4/
.parent.rotate:hover .child, .parent.rotate:focus .child {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
.parent.scalein:hover .child, .parent.scalein:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent.scaleout:hover .child, .parent.scaleout:focus .child {
-ms-transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
Created two new scale In and Scale Out
Source
https://css-tricks.com/zooming-background-images/
You can catch css-animations events with javascript function addeventlistener
Ex.
// first image
var img = document.getElementsByClassName('slideshow-image')[0];
// fired on animation start
img.addEventListener("animationstart",function() {
// do stuff here
console.log("Animation start");
},0);
Now, although this works well and how it is supposed to do it, with (not your) example will not work well since the animation is not sequential but all at the same time. (Controls the percentage instead of "steps")
But, you can get the idea and play with it to archive what you're looking for.
Important note: Vendor prefix is still used.
Additional references:
Event reference
animationstart A CSS animation has started.
animationend A CSS animation has completed
animationiteration A CSS animation is repeated.
transitionstart A CSS transition has actually started (fired after any delay).
transitioncancel A CSS transition has been cancelled.
transitionend A CSS transition has completed.
transitionrun A CSS transition has began running (fired before any delay starts).
Detecting CSS Animation Completion with JavaScript
CSS Animation Events
SO tag addeventlistener
SO tag css animations
How to set duplicate attributes in a single CSS call to jQueryLite? In angular, I want to do something like this on an SVG image:
element.css({'transform': "rotate("+rot*360+"deg)",'transform': "scale("+scl+")"});
This sets both the rotation and the scale of an SVG image. However, the result is that the last 'transform' attribute overwrites any previous ones. I.e., I can set the scale or the rotation but not both.
In this example, the expected css would look like:
transform: rotate(360deg); transform: scale(1)
You can't set a CSS property to two completely different values at the same time.
If you wrote:
transform: rotate(360deg); transform: scale(1)
then the second value would overwrite the first one and it would end up being the same as
transform: scale(1)
The transform property takes a space separated list of values. You would need to write:
transform: rotate(360deg) scale(1);
and, in theory, you do exactly the same in your JS:
element.css({'transform': "rotate("+rot*360+"deg) scale("+scl+")"});
This has nothing to do with JavaScript or jQueryLite – in a stylesheet, multiple declarations for the same property would overwrite each other as well.
The correct syntax to specify multiple transformations is
transform: rotate(360deg) scale(1)
Why not merging those by:
element.css({'transform': "rotate("+rot*360+"deg) scale("+scl+")"});
Front-end developers have little recourse but to use css transform: translateY(-50%) with top: 50% to vertically center elements of variable height. I'm doing this for a slide show of images that I want to be able to zoom in on. I've been trying to animate this using transform: scale(x) but of course any transform values applied to an element will overwrite any other ones that came before. So, to preserve transform: translateY(-50%) value while also running animate( transform: 'scale(2.5)' )I've instead run animate( transform: 'translateY(-50%) scale(2.5)' ). However, in all cases I've noticed that same curious result. The first time I trigger the animation it simply resets the translate values to nothing, and then on subsequent runs it toggles the following transform values on and off:
first state:
-webkit-transform: translate(0px, -50px) rotate(0rad) skewX(0rad) scale(1, 1);
second state:
-webkit-transform: translate(0px, -125px) rotate(0rad) skewX(0rad) scale(2.5, 2.5);
On thing that's clear is my reset translateY value somehow gets reinterpreted to pixels before being multiplied by the same factor as the scale.
Here's the code. For a little more content, the slideshow has a property draggable that I am toggling on and off in concert with enabling the zoom since I think having them work simultaneously would be terrible for UX.
$('.activate-zoom').click (e) ->
if $('.slideshow-products').slick('slickGetOption', 'draggable')
$('.slideshow-products').slick('slickSetOption', 'draggable', false).slick('slickSetOption', 'swipe', false)
$('.products .slick-active img').animate( 'transform': 'scale(2.5) translateY(-50%)')
else
$('.slideshow-products').slick('slickSetOption', 'draggable', true).slick('slickSetOption', 'swipe', true)
$('.products .slick-active img').animate( 'transform': 'scale(1) translateY(-50%)' )
What can I do to prevent the image from first reseting its translateY value, remaining vertically centered, and then zooming given that y-axis baseline.
I'm trying to find out how does medium do the animation when you click the bottom button to load the next article.
To see it, please head over to a Medium article, scroll to bottom and click to go to the next article.
I know how to use AJAX to load another page, but how can I use a similar animation ? I've searched through their code, but couldn't find it.
is similar to jquery pop effect
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
try pop effect on page.
it is just a css transition combination of scale and fade;
You can try to achieve the same effect using combination of css-animations and javascript. As a starting point you can look at effeckt.css it's a collection of css animations. Unfortunately it doesn't contain exact animation, so I've tried to reproduce it in this fiddle
The basic idea is to use two effects scaleDownFromFront and slideFromBottom:
#keyframes scaleDownFromFront {
to {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes slideFromBottom {
from {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
I've got a simple text inside a div, something like the following;
<div id="banner">
<div>This is an example text</div>
</div>
I want the text inside the div to be rotated 20-30 degrees. I've already found this topic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried jquery rotate, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?
NOTE: Cufon is also being used.
Update after Codlers answer:
This is the current applied css after the answer of Codler. Works in FF and Chrome.
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/
UPDATE 2:
IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
background-color:transparent;
/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;
position:absolute;
padding : 45px 10px 15px 10px;
The Final working piece of code. Credits for this go toe Jeff and Codler.
HTML:
<div id="banner">
<div>This is an example text</div>
</div>
Default CSS:
#banner > div
{
-moz-transform: rotate(-20deg); /*FF*/
-o-transform: rotate(-20deg); /*Opera*/
-webkit-transform: rotate(-20deg); /*Safari, Chrome*/
-ms-transform: rotate(-20deg) !important; /*IE9*/
transform: rotate(-20deg); /*CSS3 default*/
background-color:transparent;
zoom: 1;
z-index:1; /*NEEDED FOR IE8*/
width: 191px;
position:absolute;
padding : 45px 10px 15px 10px;
}
CSS FOR IE 7 & 8 - Loaded conditionally:
#banner
{
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;
padding-top:0px;
}
In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:
-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
In Internet Explorer 6 and 7, things get tricky. You can use IE's filter property to do rotation.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2 or rotation=3
Do you want to rotate something in IE to a different angle? Are you ready for the headache?
You can use IE's filter property again and specify matrix coordinates, and get something really ugly like this:
progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');
There are instructions on how to use the Matrix coordinates on this page, but frankly none of them make any sense. A better solution is to use this handy Matrix calculator that will generate the CSS you need when you specify the angle in degrees.
You can check out the CSS on my site to see an example, but I haven't checked it using IE in a while, so I can't make any promises...
It is possible to rotate with css3
transform: rotate(20deg);
Remember that some browser require vendor prefix.
.box_rotate {
-moz-transform: rotate(20deg); /* FF3.5+
-o-transform: rotate(20deg); /* Opera 10.5
-webkit-transform: rotate(20deg); /* Saf3.1+, Chrome
-ms-transform: rotate(20deg); /* IE9
transform: rotate(20deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
zoom: 1;
}
Source http://css3please.com/
It seems as if the black square in the background in IE9 happens when those nasty proprietary filters are also in the selector where you are doing css transforms.
It's not really possible in IE. At best, IE can only rotate in multiples of 90 degrees, and even that's a pain (IIRC). However, this answer claims otherwise.
For modern browsers, use the transform, -webkit-transform, and -moz-transform, as suggested already.
You might be able to bodge it using VML (Vector Markup Language) in IE. I think it can do arbitrary rotations.
Use this tool to generate CSS that will work cross browser:
http://www.useragentman.com/IETransformsTranslator/index.html
It really does work.