Develop Reference

loopComplete function called repeatedly in Anime.js

I call my animated element as follows:
emdrSpawnElement = anime({
targets: '#alternate-main .el',
translateX: destination,
direction: 'alternate',
loop: true,
easing: selectedEasing,
duration: emdrSpawnElementSpeed,
autoPlay:false,
loopBegin: function (anim) { },
loopComplete: function (anim) {
if(trackingPassesActive == true)
{
totalPasses++;
if((totalPasses % 2) == 0)
{
passesDisplayed++;
document.getElementById("passes-count-2").innerText = passesDisplayed.toString();
console.log(passesDisplayed);
}
}
clearInterval(switchDirectionSoundPlayer);
switchDirectionSoundPlay();
}
});
My interface contains a slider to change the speed of the element. Every time the slider is moved, the code listed above calls again.
My problem: the loopComplete function is running as if every time I change the slider, a new anime element is created without deleting the old one. The result is the loopComplete function being called many times, increasing every time I change the slider.
My goal is to stop repeat calls to the loopComplete function. How can I remove the anime element every time I want to change its speed? I only want the loopComplete function to be calling for one anime element at a time. Much love to anyone who can share some wisdom on this subject.

Trying to randomize a news ticker interval in jQuery

I have a jQuery-based scrolling news ticker that uses a set interval in milliseconds to control the delay between the reveal of each new section of text. I'd like to randomize the delay so that it more closely mimics the way a realtime news feed would look.
I've tried experimenting with some Math.random javascript where the newsTickerInterval parameter is, but JS is not my native language and I'm having trouble making it work.
Here's the jQuery function my scroller uses to config the display:
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
newsTickerInterval: 3000,
onToDo: function () {
//console.log(this);
}
});
});
Any hints or suggestions would be greatly appreciated!

Instead of using newsTickerInterval, make a function getNewsTickerDelay that generates a random delay interval and call it using a setTimeout whenever needed.
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
getNewsTickerDelay: function() {
var minimumInterval = 2000;
var maximumInterval = 5000;
var additionalInterval = Math.floor(
Math.random() * (maximumInterval - minimumInterval)
);
return minimumInterval + additionalInterval;
},
onToDo: function () {
//console.log(this);
}
});
});
So, every time your timeout is called, set another one with a random delay using getNewsTickerDelay
--EDIT--
As pointed out by #Barmar, you might need to tweak the implementation of the plugin in your case and implement its internal animate method to use your defined random interval instead of a fixed value. You'll just need to replace the self.options.newsTickerInterval in that plugin's JS to self.options.getNewsTickerDelay(). That is if you are willing to mutate the plugin's implementation.

Zoom to Openlayers 3 function

I'm using this function from Openlayers 3 cookbook:
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());
}
This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.
I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?

I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
padding : [100, 100, 100, 100]
});
}

How Could This JS Block Be Short-Handed? (JS Refresher)

I haven't used JS in awhile (2yrs) and I seem to have forgotten some basics;
So my question is: How would I clean-up or 'short-hand' the following javascript?
It would help me out on improving my JS code ( and maybe joggle my brains - LOL ).
var tl = TweenLite.to;
tl("#container", 0, {autoAlpha:0});
tl("#header", 0, {top:"-70px"});
tl("#footer", 0, {bottom:"-180px"});
function showPage() {
tl("#container", .2, {autoAlpha:1, delay:.5});
tl("#header", .2, {top:"0px", delay:.8});
tl("#footer", .2, {bottom:"-150px", delay:.8});
} window.onload = showPage;
...and obviously I am using TweenLite and I am not using jQuery but I am using Zepto. Thnx for your help.
-jason

Something like this:
var tl = TweenLite.to,
duration = 0.2;
// Set starting states in CSS
function showPage() {
tl("#container", duration, {autoAlpha: 1, delay: .5});
tl("#header", duration, {top: "0px", delay: .8});
tl("#footer", duration, {bottom: "-150px", delay: .8});
}
window.onload = showPage;
You could also check out the TweenLite.from method which allows you to do the inverse and set the finished states initially and specify where to tween from.

Successive Animations with Tweenlite/Tweenmax triggered on scroll

I am using tweenlite/tweenmax to do animations in an html file. I want to trigger animations based on scroll position (like www.onlycoin.com). However, I cannot figure out how to do a second animation on one imagine after I do the first one (in my example, I am trying to move an image left and then move it back right). Any idea how to do this? Here is what I have:
var controller = $.superscrollorama(),
handleComplete = function(elem) {
console.log('complete', elem);
$('#'+elem).css('rotation', 0);
};
var likeAnimations = new TimelineLite();
var likeReverse = new TimelineLite();
controller.addTween($('#one'),
likeAnimations.append([
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete:
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}})
])
})
]),
300,
400);
Any help would be awesome.

The special property onComplete accepts a function.. from the TweenMax Docs
onComplete : Function - A function that should be called when the tween has completed
so you would have to either make an anonymous function like this:
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: function(){
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
});
or you will have to put your tween inside a function, and have your first tween's onComplete callback reference a function.
myFunction() {
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: myFunction
});
You are basically adding the tween for the onComplete callback, instead of the expected function.
Checkout the GreenSock TweenMax Docs