We Keep Coding

How to save object position after animation in JavaScript?

I am trying to animate an object for a game in which the ball is supposed to move up, right, left and down on pressing user button. I am trying to achieve this by using .animate() function on the ball. But after every animation event, the ball resets to its initial position and does not continue moving from its "new" position. Is there any way to accomplish this?
Following is my condensed code snippet for simplicity:
/* Animation */
var item = document.getElementById('item');
var anim;
function myMoveLeft(){
anim=item.animate([
// keyframes
{ transform: 'translateX(0px)' },
{ transform: 'translateX(-60px)' }
], {
duration: 1000,
iterations: 1
});
}
function myMoveDown(){
anim=item.animate([
// keyframes
{ transform: 'translateY(0px)' },
{ transform: 'translateY(60px)' }
], {
duration: 1000,
iterations: 1
});
// anim.onfinish(()=>{console.log("onfinish ran")})
}
item.addEventListener('animationend', () => {
console.log('Animation ended');
});
button{
display:inline-block;
height:40px;
width:80px;
}
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: lightgray ;
}
#item {
background: orange;
position: absolute;
right:30px;
top:30px;
height: 30px;
width: 30px;
border-radius:50%;
}
<p>
<button onclick="myMoveLeft()">Left</button>
<button onclick="myMoveDown()">Down</button>
</p>
<div id ="myContainer">
<div id="item"></div>
</div>
As seen, I have already tried using .onfinish() and Event Listener 'animationend' hoping I could update the new 'right' and 'top' position but it does not work. Not sure if that would be the right approach.
Could someone please suggest on how to save the element to a new position and animate it further from that new position?
PS: I am also open to suggestions/techniques if you feel there are other better ways to do this.
Thanks a lot in Advance!!

You can make the ball get the final transform value using the fill option, which is the same as animation-fill-mode in css animation.
For not override the transform when you do the next animation, you can save the x and y value as variables, and do any animation according to the current x and y state. (from x to x-60, instead from 0 to -60, etc.)
Example:
/* Animation */
var item = document.getElementById('item');
var anim;
var x=0, y=0;
function myMoveLeft(){
anim=item.animate([
// keyframes
{ transform: `translate(${x}px, ${y}px)` },
{ transform: `translate(${x-60}px, ${y}px)` }
], {
duration: 1000,
iterations: 1,
fill: 'forwards'
});
x -= 60;
}
function myMoveDown(){
anim=item.animate([
// keyframes
{ transform: `translate(${x}px, ${y}px)` },
{ transform: `translate(${x}px, ${y+60}px)` }
], {
duration: 1000,
iterations: 1,
fill: 'forwards'
});
y += 60;
// anim.onfinish(()=>{console.log("onfinish ran")})
}
item.addEventListener('animationend', () => {
console.log('Animation ended');
});
button{
display:inline-block;
height:40px;
width:80px;
}
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: lightgray ;
}
#item {
background: orange;
position: absolute;
right:30px;
top:30px;
height: 30px;
width: 30px;
border-radius:50%;
}
<p>
<button onclick="myMoveLeft()">Left</button>
<button onclick="myMoveDown()">Down</button>
</p>
<div id ="myContainer">
<div id="item"></div>
</div>

Load an image (background-image CSS) dynamically using javascript

i'm trying to convert the background-image (css) into an object to change it's value but I couldn't find a solution.
At the moment there are 2 images in the script the first one is a circle loader script and the second one is a script that based of the value of the range it shows or hides part of the picture.
What i'm trying to do is to make load the picture inside the circle loader script.
For instance if the circle loader is 30/100 it should show only display 30% of the picture inside the circle vertically.
Here's the code:
Live version:
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
var sldH = document.getElementById('slider-h');
var sldV = document.getElementById('slider-v');
var img = document.getElementById("image");
// attach change handlers to the sliders
sldH.addEventListener('change', changeHandler);
sldV.addEventListener('change', changeHandler);
function changeHandler(e) {
var isHorizontal = e.srcElement.id == 'slider-h';
// get the sliders values
var valH = sldH.value;
var valV = sldV.value;
// calculate the percentage to pass an absolute length value
// to the clip property and determine the static value
var leftVal = calcPerc(img.width, valH);
var topVal = -1 * calcPerc(img.height, valV);
var clipVal = getClipVal(topVal, leftVal);
// set the images' right offset clip accordingly
img.style.clip = clipVal;
}
function calcPerc(range, val) {
return range / 100 * val;
}
function getClipVal(top, left) {
return 'rect(' + top + 'px, auto, auto, ' + left + 'px)';
}
#container {
margin: 20px;
top: 80px;
width: 200px;
height: 200px;
position: relative;
background-image: url("http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.btc{
background-image: url("http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#slider-h,
#slider-v,
#image,
#underlay {
/* absolute positioning is mandatory for clipped elements (#image) */
position: absolute;
}
#slider-h,
#image,
#underlay {
width: 192px;
left: 100px;
}
#slider-h {
top: 50px;
left: 350px;
}
#slider-v {
top: 192px;
left: 200px;;
width: 207px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
#image,
#underlay {
top: 100px;
left: 350px;
height: 207px;
}
#image {
/* initial clip state */
}
#underlay {
/*background-color: #4C76A5;*/
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container" >
</div>
<input type="range" min="0" max="100" id="slider-h" value="0" />
<input type="range" min="-100" max="0" id="slider-v" value="0" />
<div id="underlay"></div>
<img src="http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png" id="image" />
I hope somebody can help! Thanks

How to animate cloned element?

What i want to do is looped horizontaly text slider.
My attempt - when end of text is displayed, clone this element move to right end and play animation for cloned element again - but i can't achieve that because for some reason cloned element don't want to animate.
This is chrome only app
Here is jsfiddle.
CSS
#elm {
width: 100px;
height:20px;
overflow: auto;
overflow-y: hidden;
position:absolute;
top:10px;
left:10px;
}
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#elm .inner-elm {
position:absolute;
white-space: nowrap;
}
HTML
<div id="elm">
<div class="inner-elm"> 11111111 2222222 333333 4444444</div>
</div>
JS
var elm_right = $('#elm').offset().left + $('#elm').outerWidth();
var settings = {
duration: 5000,
easing: 'linear',
step: function() {
var this_right = $(this).offset().left + $(this).outerWidth();
// make some clone
if(!$(this).hasClass('cloned') && ((this_right + 50) < elm_right)) {
$(this).addClass('cloned');
var clone = $(this).clone(true);
clone.addClass('cloned')
.css('left', $('#elm').width())
.appendTo('#elm')
.animate({right:100}, settings);
}
// remove parent
if( (this_right - 20) < $('#elm').offset().left) {
$(this).remove();
}
}
};
var that = $('#elm .inner-elm');
that.animate({right: that.outerWidth()}, settings);

You could use CSS3 transitions for a simple animation like this. fiddle
var interval = 2000;
var nextTimeout = 200;
var wrapper = $('#elm');
var elem = $('.inner-elm', wrapper);
elem.addClass('move');
setInterval(function(){
var clone = elem.clone(true);
elem.remove();
elem = clone;
elem.removeClass('move');
wrapper.append(elem);
setTimeout(function(){
elem.addClass('move');
}, nextTimeout);
}, interval);
#elm {
height:20px;
overflow: auto;
overflow-y: hidden;
position:absolute;
top:10px;
left:10px;
}
.inner-elm{
transition: all 2s linear;
-ms-transform: translate(110%, 0); /* IE 9 */
-webkit-transform: translate(110%x, 0); /* Safari */
transform: translate(110%, 0);
}
.move{
-ms-transform: translate(-130%, 0); /* IE 9 */
-webkit-transform: translate(-130%, 0); /* Safari */
transform: translate(-130%, 0);
}
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#elm .inner-elm {
position:relative;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="elm">
<div class="inner-elm">Stackoverflow</div>
</div>

appendTo is not working with each in jquery

I have to apply animation on each "div". But it is applying just in first one not in all.
According to me "$("#viewport").each(appendTo(c));" this line is not working in javascript code.
HTML code:
<div id="viewport"></div>
<div id="viewport"></div>
<div id="viewport"></div>
Javascript code:
$(window).load(function(){
$(function () {
var a = 0;
for (; a < 15; a += 1) {
setTimeout(function b() {
var a = Math.random() * 1e3 + 5e3,
c = $("<div />", {
"class": "smoke",
css: {
opacity: 0,
left: Math.random() * 200 + 80
}
});
**$("#viewport").each(appendTo(c));**
$.when($(c).animate({
opacity: 1
}, {
duration: a / 4,
easing: "linear",
queue: false,
complete: function () {
$(c).animate({
opacity: 0
}, {
duration: a / 3,
easing: "linear",
queue: false
})
}
}), $(c).animate({
bottom: $("#viewport").height()
}, {
duration: a,
easing: "linear",
queue: false
})).then(function () {
$(c).remove();
b()
});
}, Math.random() * 3e3)
}
}());
});

Use more than one element with the same id is absolutely bad practice! Put "vieport" as class and use
$( ".viewport" )
The .each() function take a function as first argument and in that function context, the "this" variable will contain the element
$( ".viewport" ).each( function() {
$( this ).appendTo( c );
});

If I am not wrong. You want something like this:
HTML:
<div id="viewport">
<div class="smoke smoke1"></div>
<div class="smoke smoke2"></div>
<div class="smoke smoke3"></div>
</div>
JS:
(function () {
"use strict";
$('#viewport .smoke').each(function ns () {
var initialTop = $(this).position().top;
$(this).animate({
top: - $(this).height()
}, Math.random() * 2000 + 2000, function () {
$(this).css({
top: initialTop,
opacity: 0
});
}).animate({
opacity: 1
}, ns)
});
}());
CSS:
#viewport {
position: relative;
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
}
#viewport .smoke {
position: absolute;
width: 20px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
left: 140px;
top: 260px;
}
#viewport .smoke2 {
left: 180px;
top: 260px;
}
#viewport .smoke3 {
left: 220px;
top: 260px;
}
Please see demo here: http://jsfiddle.net/1rf31eyL/
You may check another example demo here: http://gettycreations.com/

first of all
add function in $.each
like
"$("#viewport").each(
function(){
$(this).appendTo(c);
}
);
and then try this,
$("[id=viewport]")
When you use
$("#viewport")
it selects only the first element with the given ID.
However, when you select by attribute (e.g. id in your case), it returns all matching elements, like so:
$("[id=viewport]")

Audio and animation in sync in javasctipt loop

I'm using my limited javascript skills to try an piece togheter a script that can play a small animation and a sound clip in a loop. This is what i've got so far:
<script>
function PulseArea() {
$('.area-pulse').stop();
$('.area-pulse').css({ width: 38, height: 38, top: 217, left: 77, opacity: 1 });
$('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () { setTimeout("PulseArea()", 400); });
}
$(function() {
var sample = new Audio("audio/water-droplet-1.wav");
function playSample() {
sample.pause();
sample.currentTime = 0;
sample.play();
}
})
$(document).ready(function() {
for (i=0;i<=5;i++)
{
PulseArea();
playSample();
}
})
</script>
Related css:
.area-pulse
{
display:block;
width:38px;
height:38px;
position:absolute;
top:217px;
left:77px;
background-color:transparent;
zoom: 1;
}
.area-pulse img
{
opacity:1;
width:100%;
height:100%;
display:inline-block;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/area_pulse.png', sizingMethod='scale');
background-color:transparent;
}
Related HTML:
<div style=" width:954px; height:600px; position:absolute;" class="area-pulse"><img src="img/area_pulse.png" /></div>
It's the sound that is the problem. The animation plays fine. Any suggestions? I've searched StackOverflow, but can't find anything like this.
Thanks for taking an interest!

Your function playSample is defined inside of anonymous function scope, so it can't be called from the document.ready scope. If you move all of it into the same scope, it will work fine:
$(document.ready(function () {
function PulseArea() {
$('.area-pulse').stop();
$('.area-pulse').css({ width: 38, height: 38, top: 217, left: 77, opacity: 1 });
$('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () { setTimeout("PulseArea()", 400); });
}
var sample = new Audio("audio/water-droplet-1.wav");
function playSample() {
sample.pause();
sample.currentTime = 0;
sample.play();
}
for (i=0;i<=5;i++) {
PulseArea();
playSample();
}
});

I don't know what was wrong with the script in my question, but i solved it by rewriting it. I hope someone else can be helped by this. :)
<script>
function PulseArea() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/waterdrop.mp3');
audioElement.play();
$('.area-pulse').stop();
$('.area-pulse').css({ width: 16, height: 16, top: 227, left: 89, opacity: 1 });
$('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () { setTimeout("PulseArea()", 400); });
}
$(document).ready(function() {
for (i=0;i<=5;i++)
{
PulseArea();
}
})
</script>