Animating Transform Scale via Javascript - 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.

Related

How to transform Image with CSS based on the JavaScript variable?

This is the example of how it should look like on a website:
https://imgur.com/a/st9df
In the gif, Chart.js is used for the Chart (Canvas)
The arrow in the middle is being rotated with the CSS transform
Let's say the JavaScript variable is "0", that would mean the arrow has to stop on the start, and if the variable is "33" it should stop at ~1/3 of the chart and so on.
And also the arrow should also change it's color the one it stops at. It needs another variable from the JavaScript.
Here is the website link where you can see the chart yourself:
http://ripskins.net/round/59891/50+otFELF0-eo4PL0md8
You can achieve something like this by using css animation keyframes and jquery to add class and changing the resultant color.
You can set a timeout to change the final color as well.
$(document).ready(function(){
$("#demo").addClass("trans");
})
.square
{
width:100px;
height:100px;
background:red;
}
.trans
{
transition: all 2s ease-out;
animation: transrotate 2s;
}
#keyframes transrotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
background: blue;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="square" id="demo">
</div>

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?

Rotating image 2 times

There is several questions about how to rotate an image, but I want an animation-like rotating. By an
event (tap) I would like to rotate an image with -5 degree then with 5 degree, but if I write both rotating in
the same function (or eventhandler), the first rotate doesn't appear only the second is visible.
$("#imgdiv").on('taphold', function(e){
//$("#imageID").addClass("swing animated");
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
//$("#imageID").removeClass("swing animated");
});
I have also tried a swing animation with classes (addClass, then removeClass), but with the same result:
#keyframes swing {
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
You may put the second animation in a setTimeout in order to delay its animation until the first one finishes.
You can also put your transition in the css rather than in JS. Just place the transform value in JS.
Try something like this SAMPLE.
JS:
$(".clickme").click(function(){
//animate to -5deg
$(this).css('transform','rotate(-5deg)');
//animate to 5deg
setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
//animate back to root position
setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});
you can do with addclass and removeclass, but there is one mistake in your code.
you are doing addclass and removeclass at the same time. so, animation is not happening or only one time happens
so try setTimeout:
$("#imgdiv").on('click', function(e){
$("#imageID").addClass("swing animated");
setTimeout(function(){
$("#imageID").removeClass("swing animated");
},1000)
});
i have done that in jsfiddle - http://jsfiddle.net/tqn394k9/

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)');
});

Add custom animation delay for every div with the class "bounce"?

How would I add a custom animation delay for every div with the class "bounce"? Basically the class bounce contains the animation css keyframes (animate.css). Now, I have 20 divs called "360player bounce". but they all bounce at the same time.
example:
<div class="360player bounce">
<a href="audio/The_Song.mp3">
The Song
</a>
</div>
Just wondering how I could do this. I searched entire stackoverflow and google but no luck so far.
I have created a similar animation for falling stars. I believe you are going to have to create distinct animation sets each with different delays. It Depends on what you are trying to achieve in my instance I created 5, 6 different animation chains and delayed them each slightly so it appears they are all moving at different times.
Example below
#keyframes fallingstars {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(0deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-870px, 500px) rotateZ(310deg);
}
}
#keyframes fallingstars2 {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(25deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-570px, 600px) rotateZ(210deg);
}
}
#fallstar {
animation: fallingstars 12s infinite;
animation-delay:5s;
z-index:-1;
}
#fallstar2 {
animation: fallingstars2 12s infinite;
z-index:-1;
}
<img src="stars-ALL.svg" id="fallstar" alt="Stars" style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />
You could also modify the animation using jquery / js to change the delay. This is just one of several ways to accomplish this. Loop through all your divs, and for each div modify the animation delay. I feel this might be expensive.
I don't know if the CSS library you're using includes it, so here's the specific CSS property you're looking for:
http://www.w3schools.com/cssref/css3_pr_animation-delay.asp
You can apply this attribute on top of an existing CSS animation, perhaps by defining your own seperate class in your page's own CSS file and adding that.
CSS:
.wait300ms {
animation-delay: 300ms;
/*TODO: Add cross-browser attributes */
}
HTML:
<div class="360player bounce wait300ms">

Categories

Resources