Develop Reference

Animating Transform Scale via Javascript

So, I'm animating a SVG button and I want to animate transform property combined with a fadeout with opacity attributes via Javascript.
The code would look like something like this: (Considering it's coming with opacity 0 and scale 0)
(I know the way I'm doing it it's incorrect because it's overriding till last set attribute)
function hiA(){
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("opacity", "1");
}
And the same but in reverse: (Considering it's coming with opacity 1 and scale 1)
function byeA(){
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(0)");
pathA.setAttribute("opacity", "0");
}
I don't know if it's possible or if it's better to add a class with the animation on CSS.

you can set class and style in css: https://www.w3schools.com/css/css3_animations.asp
JS:
pathA.className+="hiA"
CSS:
#keyframes example {
0% {transform:scale(1);}
50% {transform:scale(.5)}
100% {transform:scale(1);opacity:1;}
}
.hiA{
animation: example 1s;
}
See example:
function hiA(){
var pathA=document.getElementById("pathA");
pathA.className="hiA";
setTimeout(function(){ pathA.className=""; }, 3000);
}
#keyframes example {
0% {transform:scale(.5);}
50% {transform:scale(1);}
100% {transform:scale(0);}
}
.hiA{
animation: example 3s;
}
<button onclick="hiA()" id="pathA">animation me</button>
ED

You could define keyframes in css:
#keyframes hia{
0%{
transform: scale(1);
}
50%{
transform: scale(0.5);
}
}
... and so on, and then add the animation in css to a class or add it to the element with js:
.element{
animation: hia 3s;
}

I quickly tested you example code on a SVG. It works.
But I would prefer defining the animations in CSS and simply adding and removing CSS classes to/from the SVG or its sub elements. This is a cleaner separation of concerns, in my opinion. And you enable possible performance accelerations by the browser, since it known about the animations beforehand and can do it on the GPU, theoretically.

CSS how to animate from the recently applied transform?

I am applying a dynamic transform to an element when dragging, for example:
HTML
<div style="transform: `translateX(${distance}px) translateY(-${distance / 10}px) rotate(-2deg) scale(0.9)`">
Drag Me
</div>
However when a certain distance has been reached I complete the animation by adding a custom class, say completeAnimation and the rules go like this:
#keyframes animation {
0% {
}
50% {
transform: translateX(270px) translateY(-50px) rotate(-15deg) scale(0.8);
}
100% {
transform: translateX(470px) translateY(50px) rotate(-15deg) scale(0.8);
}
}
.completeAnimation {
animation-duration: 1s;
animation-name: swipeRight;
animation-fill-mode: animation;
}
But obviously, when the class completeAnimation is applied to the class attribute it jumps back to its default display and directly complete to 100% in the animation css.
Is there a way to start the animation where the last applied style left off?

Delaying Animation on Click Slide Change

I have a slick slider that use a fade transition. Each active slide has an animation that scales the background image of the slide. When the slide changes the animation is removed from the slide.
When manually clicking to a new slide the scale jumps back to the default size before the transition finished creating a jump on the image. My question is how do I delay the removal of the animation so I don't get that jump back to the default scale?
Code is below, and you can see an example here: http://tesla.uk-cpi.com/
JS
// Slider on Home Page
$('.homeSlider').slick({
draggable: true,
autoplay: true,
autoplaySpeed: 7000,
arrows: false,
dots: true,
fade: true,
speed: 500,
infinite: true,
cssEase: 'linear',
touchThreshold: 100,
customPaging : function(homeSlider, i) {
var title = $(homeSlider.$slides[i]).data('title');
var number = $(homeSlider.$slides[i]).data('index-number');
return '<a class="pager__item" onClick=reset()><div class="slide-number">'+number+'</div><div class="slide-title">'+title+'</div></a>';
},
});
$('.slick-active .item').addClass('kenburnseffect');
$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
$('.item').removeClass('kenburnseffect');
$('.slick-active .item').addClass('kenburnseffect');
});
CSS
.item {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#-webkit-keyframes kenburns {
from {
-webkit-transform: scale(1.1);
}
to {
-webkit-transform: scale(1);
}
}
#keyframes kenburns {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}

Use setTimeout,
$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
setTimeout(function(){
$('.item').removeClass('kenburnseffect');
$('.slick-active .item').addClass('kenburnseffect');
},1000);
});
Here, time delay is given 1000 milli-seconds

I had the same issue and never found a good JS solution. One CSS solution I've found that isn't perfect but at least hides the ugly 'jump' when you skip the slide mid-animation is to add this:
.slick-slide[aria-hidden="true"] img {
visibility: hidden;
}
It basically hides the active slide during the fade, so you don't get as much of a blend between the two slides the casual observer probably won't notice or care.
EDIT - Found another, better CSS solution. There's a CSS animation property called 'animation-play-state'. Instead of hiding the image during the transition, you can pause it so that it doesn't jump when the current class disappears. However, you do need to make the animation infinite as it'll resume, rather than reset on each slide, so if the user comes back around to them it'll eventually stop. You will also want to make the animation start and end in the same state to loop seamlessly. Code example below:
img {
transform-origin: bottom left;
transform: scale(1.1);
animation-name: bannerPan;
animation-duration: 18s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-play-state: paused;
}
.slick-current img {
animation-play-state: running;
}
#keyframes bannerPan {
0% {
transform-origin: bottom left;
transform: scale(1.0);
}
50% {
transform-origin: bottom left;
transform: scale(1.1);
}
100% {
transform-origin: bottom left;
transform: scale(1.0);
}
}

css, using rotate and jquery to initial position

I use a class, that make a picture rotate.
This class looks like that
.zodiac_rotate {
-webkit-animation:spin 15s linear infinite;
-moz-animation:spin 15s linear infinite;
animation:spin 15s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
I also tried to do that rotate using jquery but in css I've seen that it is more fluid so I decided to do it in css only.
Now, using jquery I would like to stop the rotate when the mouse is over the picture. I did a small javascript and it works fine :
$('#zodiac').hover(function(){
$(this).removeClass('zodiac_rotate');
},function(){
$(this).addClass('zodiac_rotate');
})
The trouble I have is with the position, I would like that when we mouse over the image, it stay at its position, when I remove the class, it goes like the original position, so the effect is not so fine.
Anykind of help will be much appreciated.

You could use animation-play-state for that
$('#zodiac').on('mouseover', function () {
$(this).css('-webkit-animation-play-state','paused');
$(this).css('animation-play-state','paused');
});
$('#zodiac').on('mouseout', function () {
$(this).css('-webkit-animation-play-state','running');
$(this).css('animation-play-state','running');
})
JSFiddle

Do rotate with jquery something like this:
$('#zodiac').hover(function(){
$(this).css('transform','rotate(0deg)');
});

jQuery : How to animate a span and show?

I have a function that checks mail on every 10 secods, if there is a new email, it make a bubble notification and show the total number of mail.
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
It animates the bubble, first time I load the page, but this function is set on an interwal, so it should animate the bubble each time there is new mail, but it Doesn't
My animation and other functions are perfect.. it is just it Doesn't animate when it is being called in set interval. it ads the number of total mail.. but no animation.
Please help me.
Regards
Added
This is animating class and css
.animating{
-webkit-animation: animate 1s cubic-bezier(0,1,1,0);
-moz-animation: animate 1s cubic-bezier(0,1,1,0);
-ms-animation: animate 1s cubic-bezier(0,1,1,0);
-o-animation: animate 1s cubic-bezier(0,1,1,0);
animation: animate 1s cubic-bezier(0,1,1,0);
}
#-webkit-keyframes animate{
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(1.7);
}
}
#-moz-keyframes animate{
from {
-moz-transform: scale(1);
}
to {
-moz-transform: scale(1.7);
}
}
#-ms-keyframes animate{
from {
-ms-transform: scale(1);
}
to {
-ms-transform: scale(1.7);
}
}
#-o-keyframes animate{
from {
-o-transform: scale(1);
}
to {
-o-transform: scale(1.7);
}
}
#keyframes animate{
from {
transform: scale(1);
}
to {
transform: scale(1.7);
}
}

You'll need to remove the class once the animation is completed, and re-add it once you'll need to use it again.
setInterval(function() {
$("#bubble_mate").addClass('animating');
setTimeout(function() {
$("#bubble_mate").removeClass('animating');
}, 1000); // This is the time specified in your CSS
}, 3000); // Example interval time
​JSFiddle.

If you are using keyframe animations, you may want to remove the class, then wait 1 ms and re-add the class. Adding the class multiple times will not animate it multiple times.
$('#test').addClass('animated');
setInterval(function(){
$('#test').removeClass('animated');
setTimeout(function(){
$('#test').addClass('animated')
}, 1);
}, 3000);
Will give the test element the class 'animated', which will start the animation, and every 3 seconds, it will remove the class, pause for 1 ms, then re-add it, which will restart the animation.
Source: http://jsfiddle.net/jcolicchio/eV7ET/

To show the slide down effect you have first to hide the div!
$("#simulate").on("click", function() {
console.log("mail in");
$("#bubble_mate").text("10 new mail");
$("#bubble_mate").addClass('animating').hide();
$("#bubble_mate").slideDown(500);
});
try on this fiddle
http://jsfiddle.net/jQmJr/32/
​

Try:
jQuery("#bubble_mate").hide().show('normal');

I resolved it myself..
in beforeSend function i added this:
beforeSend:function (){
jQuery("#bubble_mate").removeClass('animating');
},
and then on success:
success:function(responseText)
{
if(responseText.mails=='yes')
{
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
}
}

I used the webkitEndAnimation event to remove the animated class and the end of the animation.
Here is the live example
Code:
$(document).ready(function(){
setInterval(function(){
$('#test').show().addClass('animated');
}, 3000);
$('#test').on('webkitAnimationEnd', function () {
$(this).removeClass('animated').hide();
});
});​
If this works for you should think of a way to get the correct event name depending on the users browser