Develop Reference

Most efficient way to pick or extract the code of a single JavaScript based animation?

I'm trying to extract the *.JS and CSS code of a specific image reveal animation that is embedded onto a static HTML page:
Sadly, the particular effect I'm looking at is embedded into a showcase of several image animations, which makes picking only the necessary lines of code from the (huge) *.JS and *.CSS file extremely difficult:
Image Animation is at the 'good design - good business' part
While I'm able to identify some of the code related to the animation, such as:
<div class="block-revealer__element" style="transform: scaleX(0); transform-origin: 100% 50%; background: rgb(240, 240, 240); opacity: 1;"></div>
I'm left with the enormously time consuming and error-prone task to identify all other necessary CSS parts manually, which becomes an almost impossible task when having to search through 8589 lines of JavaScript in a reverse engineering approach.
Additionally, this approach leads to a time-consuming trial & error phase to validate if whether or not all necessary parts have been identified and copied.
Is there any plugin, workaround or simply more efficient way to target specific CSS and JavaScript code without having to search through the complete code manually?

The plugin which you are looking for is available here. Search for liquidReveal.
Since this link can go down any time, i am posting the code here
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
/*
* Credits:
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2016, Codrops
* http://www.codrops.com
*/
;(function ($, window, document, undefined) {
'use strict';
var pluginName = 'liquidReveal';
var defaults = {
// If true, then the content will be hidden until it´s "revealed".
isContentHidden: true,
// If true, animtion will be triggred only when element is in view
animteWhenInView: true,
delay: 0,
// The animation/reveal settings. This can be set initially or passed when calling the reveal method.
revealSettings: {
// Animation direction: left right (lr) || right left (rl) || top bottom (tb) || bottom top (bt).
direction: 'lr',
// Revealer´s background color.
bgcolor: '#f0f0f0',
// Animation speed. This is the speed to "cover" and also "uncover" the element (seperately, not the total time).
duration: 500,
// Animation easing. This is the easing to "cover" and also "uncover" the element.
easing: 'easeInOutQuint',
// percentage-based value representing how much of the area should be left covered.
coverArea: 0,
// Callback for when the revealer is covering the element (halfway through of the whole animation).
onCover: function onCover(contentEl, revealerEl) {
return false;
},
// Callback for when the animation starts (animation start).
onStart: function onStart(contentEl, revealerEl) {
return false;
},
// Callback for when the revealer has completed uncovering (animation end).
onComplete: function onComplete(contentEl, revealerEl) {
return false;
},
onCoverAnimations: null
}
};
function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function init() {
this._layout();
if (this.options.animteWhenInView) this.setIntersectionObserver();else this.doTheReveal();
},
_createDOMEl: function _createDOMEl(type, className, content) {
var el = document.createElement(type);
el.className = className || '';
el.innerHTML = content || '';
return el;
},
/**
* Build the necessary structure.
*/
_layout: function _layout() {
var position = getComputedStyle(this.element).position;
if (position !== 'fixed' && position !== 'absolute' && position !== 'relative') {
this.element.style.position = 'relative';
}
// Content element.
this.content = this._createDOMEl('div', 'block-revealer__content', this.element.innerHTML);
if (this.options.isContentHidden && this.content.querySelector('figure')) {
this.content.querySelector('figure').style.opacity = 0;
}
// Revealer element (the one that animates)
this.revealer = this._createDOMEl('div', 'block-revealer__element');
this.element.classList.add('block-revealer');
this.element.innerHTML = '';
this.element.appendChild(this.content);
var parallaxElement = this.element.querySelector('[data-parallax=true]');
if ((typeof parallaxElement === 'undefined' ? 'undefined' : _typeof(parallaxElement)) !== (typeof undefined === 'undefined' ? 'undefined' : _typeof(undefined)) && parallaxElement !== null) {
parallaxElement.appendChild(this.revealer);
} else {
this.element.appendChild(this.revealer);
}
},
/**
* Gets the revealer element´s transform and transform origin.
*/
_getTransformSettings: function _getTransformSettings(direction) {
var val, origin, origin_2;
switch (direction) {
case 'lr':
val = 'scaleX(0)';
origin = '0 50%';
origin_2 = '100% 50%';
break;
case 'rl':
val = 'scaleX(0)';
origin = '100% 50%';
origin_2 = '0 50%';
break;
case 'tb':
val = 'scaleY(0)';
origin = '50% 0';
origin_2 = '50% 100%';
break;
case 'bt':
val = 'scaleY(0)';
origin = '50% 100%';
origin_2 = '50% 0';
break;
default:
val = 'scaleX(0)';
origin = '0 50%';
origin_2 = '100% 50%';
break;
}
return {
// transform value.
val: val,
// initial and halfway/final transform origin.
origin: { initial: origin, halfway: origin_2 }
};
},
/**
* Reveal animation. If revealSettings is passed, then it will overwrite the options.revealSettings.
*/
reveal: function reveal(revealSettings) {
// Do nothing if currently animating.
if (this.isAnimating) {
return false;
}
this.isAnimating = true;
// Set the revealer element´s transform and transform origin.
var defaults = { // In case revealSettings is incomplete, its properties deafault to:
duration: 500,
easing: 'easeInOutQuint',
delay: parseInt(this.options.delay, 10) || 0,
bgcolor: '#f0f0f0',
direction: 'lr',
coverArea: 0
},
revealSettings = revealSettings || this.options.revealSettings,
direction = revealSettings.direction || defaults.direction,
transformSettings = this._getTransformSettings(direction);
this.revealer.style.WebkitTransform = this.revealer.style.transform = transformSettings.val;
this.revealer.style.WebkitTransformOrigin = this.revealer.style.transformOrigin = transformSettings.origin.initial;
// Set the Revealer´s background color.
this.revealer.style.background = revealSettings.bgcolor || defaults.bgcolor;
// Show it. By default the revealer element has opacity = 0 (CSS).
this.revealer.style.opacity = 1;
// Animate it.
var self = this,
// Second animation step.
animationSettings_2 = {
complete: function complete() {
self.isAnimating = false;
if (typeof revealSettings.onComplete === 'function') {
revealSettings.onComplete(self.content, self.revealer);
}
$(self.element).addClass('revealing-ended').removeClass('revealing-started');
}
},
// First animation step.
animationSettings = {
delay: revealSettings.delay || defaults.delay,
complete: function complete() {
self.revealer.style.WebkitTransformOrigin = self.revealer.style.transformOrigin = transformSettings.origin.halfway;
if (typeof revealSettings.onCover === 'function') {
revealSettings.onCover(self.content, self.revealer);
}
$(self.element).addClass('element-uncovered');
anime(animationSettings_2);
}
};
animationSettings.targets = animationSettings_2.targets = this.revealer;
animationSettings.duration = animationSettings_2.duration = revealSettings.duration || defaults.duration;
animationSettings.easing = animationSettings_2.easing = revealSettings.easing || defaults.easing;
var coverArea = revealSettings.coverArea || defaults.coverArea;
if (direction === 'lr' || direction === 'rl') {
animationSettings.scaleX = [0, 1];
animationSettings_2.scaleX = [1, coverArea / 100];
} else {
animationSettings.scaleY = [0, 1];
animationSettings_2.scaleY = [1, coverArea / 100];
}
if (typeof revealSettings.onStart === 'function') {
revealSettings.onStart(self.content, self.revealer);
}
$(self.element).addClass('revealing-started');
anime(animationSettings);
},
animationPresets: function animationPresets() {},
setIntersectionObserver: function setIntersectionObserver() {
var self = this;
var element = self.element;
self.isIntersected = false;
var inViewCallback = function inViewCallback(enteries, observer) {
enteries.forEach(function (entery) {
if (entery.isIntersecting && !self.isIntersected) {
self.isIntersected = true;
self.doTheReveal();
}
});
};
var observer = new IntersectionObserver(inViewCallback, { threshold: 0.5 });
observer.observe(element);
},
doTheReveal: function doTheReveal() {
var onCoverAnimations = this.options.revealSettings.onCoverAnimations;
var onCover = {
onCover: function onCover(contentEl) {
$('figure', contentEl).css('opacity', 1);
if ($(contentEl).find('.ld-lazyload').length && window.liquidLazyload) {
window.liquidLazyload.update();
}
if (onCoverAnimations) {
var animations = $.extend({}, { targets: $('figure', contentEl).get(0) }, { duration: 800, easing: 'easeOutQuint' }, onCoverAnimations);
anime(animations);
}
}
};
var options = $.extend(this.options, onCover);
this.reveal(options);
this.onReveal();
},
onReveal: function onReveal() {
if ($(this.element).find('[data-responsive-bg]').length) {
$(this.element).find('[data-responsive-bg]').liquidResponsiveBG();
}
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
var pluginOptions = $(this).data('reveal-options');
var opts = null;
if (pluginOptions) {
opts = $.extend(true, {}, options, pluginOptions);
}
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, opts));
}
});
};
})(jQuery, window, document);
jQuery(document).ready(function ($) {
$('[data-reveal]').filter(function (i, element) {
var $element = $(element);
var $fullpageSection = $element.closest('.vc_row.pp-section');
return !$fullpageSection.length;
}).liquidReveal();
});

Jquery plugin is not working and causing console errors, how do I fix?

I installed Shuffle.js from a codepen demo with some customizations to style and figure cards. I've added in recommended js code but the shuffle function doesn't seem work.
Getting several errors:
console errors
I've tried updating script based on some past answers to this problem. I've also downloaded and added the actual js file on my site and referenced it in the script. Here's what my script looks like right now:
<script src="/v/vspfiles/assets/js/shuffle.js"></script>
<script>
'use strict';
var Shuffle = window.shuffle;
var Demo = function (element) {
this.element = element;
// Log out events.
this.addShuffleEventListeners();
this.shuffle = new Shuffle(element, {
itemSelector: '.picture-item',
sizer: element.querySelector('.my-sizer-element'),
});
this._activeFilters = [];
this.addFilterButtons();
this.addSorting();
this.addSearchFilter();
this.mode = 'exclusive';
};
Demo.prototype.toArray = function (arrayLike) {
return Array.prototype.slice.call(arrayLike);
};
Demo.prototype.toggleMode = function () {
if (this.mode === 'additive') {
this.mode = 'exclusive';
} else {
this.mode = 'additive';
}
};
/**
* Shuffle uses the CustomEvent constructor to dispatch events. You can listen
* for them like you normally would (with jQuery for example). The extra event
* data is in the `detail` property.
*/
Demo.prototype.addShuffleEventListeners = function () {
var handler = function (event) {
console.log('type: %s', event.type, 'detail:', event.detail);
};
this.element.addEventListener(Shuffle.EventType.LAYOUT, handler, false);
this.element.addEventListener(Shuffle.EventType.REMOVED, handler, false);
};
Demo.prototype.addFilterButtons = function () {
var options = document.querySelector('.filter-options');
if (!options) {
return;
}
var filterButtons = this.toArray(
options.children
);
filterButtons.forEach(function (button) {
button.addEventListener('click', this._handleFilterClick.bind(this), false);
}, this);
};
Demo.prototype._handleFilterClick = function (evt) {
var btn = evt.currentTarget;
var isActive = btn.classList.contains('active');
var btnGroup = btn.getAttribute('data-group');
// You don't need _both_ of these modes. This is only for the demo.
// For this custom 'additive' mode in the demo, clicking on filter buttons
// doesn't remove any other filters.
if (this.mode === 'additive') {
// If this button is already active, remove it from the list of filters.
if (isActive) {
this._activeFilters.splice(this._activeFilters.indexOf(btnGroup));
} else {
this._activeFilters.push(btnGroup);
}
btn.classList.toggle('active');
// Filter elements
this.shuffle.filter(this._activeFilters);
// 'exclusive' mode lets only one filter button be active at a time.
} else {
this._removeActiveClassFromChildren(btn.parentNode);
var filterGroup;
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
} else {
btn.classList.add('active');
filterGroup = btnGroup;
}
this.shuffle.filter(filterGroup);
}
};
Demo.prototype._removeActiveClassFromChildren = function (parent) {
var children = parent.children;
for (var i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
};
Demo.prototype.addSorting = function () {
var menu = document.querySelector('.sort-options');
if (!menu) {
return;
}
menu.addEventListener('change', this._handleSortChange.bind(this));
};
Demo.prototype._handleSortChange = function (evt) {
var value = evt.target.value;
var options = {};
function sortByDate(element) {
return element.getAttribute('data-created');
}
function sortByTitle(element) {
return element.getAttribute('data-title').toLowerCase();
}
if (value === 'date-created') {
options = {
reverse: true,
by: sortByDate,
};
} else if (value === 'title') {
options = {
by: sortByTitle,
};
}
this.shuffle.sort(options);
};
// Advanced filtering
Demo.prototype.addSearchFilter = function () {
var searchInput = document.querySelector('.js-shuffle-search');
if (!searchInput) {
return;
}
searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};
/**
* Filter the shuffle instance by items with a title that matches the search input.
* #param {Event} evt Event object.
*/
Demo.prototype._handleSearchKeyup = function (evt) {
var searchText = evt.target.value.toLowerCase();
this.shuffle.filter(function (element, shuffle) {
// If there is a current filter applied, ignore elements that don't match it.
if (shuffle.group !== Shuffle.ALL_ITEMS) {
// Get the item's groups.
var groups = JSON.parse(element.getAttribute('data-groups'));
var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
// Only search elements in the current group
if (!isElementInCurrentGroup) {
return false;
}
}
var titleElement = element.querySelector('.picture-item__title');
var titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
};
document.addEventListener('DOMContentLoaded', function () {
window.demo = new Demo(document.getElementById('grid'));
});
</script>
Any insight into what I need to remedy to get this working properly would be great. Thanks!

Creating a method similar to delay in my own class

I am trying to create a method similar to delay() from JQuery.
I am creating a method called $. Remember I am not using JQuery and don't want to for this problem.
function $(element) {
if(!(this instanceof $)) {
return new $(element);
}
this.element = document.querySelector(element);
}
$.prototype.color = function color(color) {
this.element.style.color = color;
}
I can use this method like so:
$('#foo').color('red);
It will change the color of #foo to red
What I am trying to do is set a delay before it changes the color. One way would be to do :
$.prototype.delay(time, fn) {
setTimeout(function() {
fn();
}, time);
}
and then call it like so:
$('#foo').delay(1000, function() {
$('#foo').color('red');
});
But that's not very useful, what I would like to do instead is use it like so:
$('#foo').delay(1000).color('red);
I found this but couldn't figure it out.
Thanks in advance,
I.L
One way of doing it (#georg)
// create a new instance if it doesn't already exists when $ is called
function $(element) {
if(!(this instanceof $)) {
return new $(element);
}
this.element = document.querySelector(element);
this.promise = Promise.resolve(this);
this.css = this.element.style;
}
// wrapper for the promise
$.prototype.method = function(name, fn) {
$.prototype[name] = function(...args) {
this.promise.then(self => fn.apply(self, args));
return this;
};
}
// delay method,
$.prototype.delay = function(time) {
this.promise = new Promise(
resolve => setTimeout(() => resolve(this), time));
return this;
}
// example of a method to change the color
$.prototype.method('color', function (color) {
this.css.color = color;
});
// used like so
$('#foo').delay(2000).color('green');
<div id="foo">Hi there!</div>
I have found another nice solution that allows to use delay multiple time see my answer for more details.

Here's an example with promises. Requires some more work to be practical, but should give you an idea. Basically, all methods like color should operate on "resolved this" instead of just "this":
function $(element) {
if(!(this instanceof $)) {
return new $(element);
}
this.element = document.querySelector(element);
this.promise = Promise.resolve(this)
}
$.prototype.color = function color(color) {
this.promise.then(function(self) {
self.element.style.color = color;
});
}
$.prototype.delay = function(n) {
this.promise = new Promise(
resolve => setTimeout(() => resolve(this), n));
return this;
}
$('#foo').color('red');
$('#foo').delay(1000).color('blue');
<div id="foo">foo</div>
For automated promisifying you can use a wrapper like this:
$.prototype.method = function(name, fn) {
$.prototype[name] = function(...args) {
this.promise.then(self => fn.apply(self, args));
return this;
};
}
and then, for example,
$.prototype.method('color', function (color) {
this.element.style.color = color;
});

Here is how jQuery implement it :
function (time, type) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue(type, function () {
var elem = this;
setTimeout(function () {
jQuery.dequeue(elem, type);
},
time);
});
}
Using only* Queue :
function (type, data) {
if (typeof type !== "string") {
data = type;
type = "fx";
}
if (data === undefined) {
return jQuery.queue(this[0], type);
}
return this.each(function () {
var queue = jQuery.queue(this, type, data);
if (type === "fx" && queue[0] !== "inprogress") {
jQuery.dequeue(this, type);
}
});
}
And Dequeue :
function (type) {
return this.each(function () {
jQuery.dequeue(this, type);
});
}
The only external jQuery call in these functions is "jQuery.fx", with can be avoided.
From there, it will be easy to implement these 3 functions in your own model.

Using chainable methods and setting a delay method:
function $(element) {
if(!(this instanceof $)) {
return new $(element);
}
// select all elements with this identifier
this.elements = document.querySelectorAll(element);
// by default select the first element of querySelectorAll
this.element = this.elements[0];
this.css = this.element.style;
// first method applied will be exectuted directly
this.delayTime = 0;
}
$.prototype.$ = function position(pos) {
if(pos == 'first') {
pos = 0;
} else if(pos == 'last') {
pos = this.elements.length-1;
}
var that = this;
setTimeout(function() {
that.element = that.elements[pos] || that.elements[0];
that.css = that.element.style;
}, this.delayTime);
return this;
}
$.prototype.delay = function(delayTime) {
// set a delay for the following method applied
this.delayTime += delayTime;
return this;
}
// wraps the method into a setTimeout
$.prototype.method = function(name, fn) {
$.prototype[name] = function(...args) {
var that = this;
setTimeout(function() {
// method will only take one relevant parameter
fn(that, args[0]);
}, this.delayTime);
return this;
};
}
// CSS methods
$.prototype.method('backgroundColor', function(self, color) {
self.css.backgroundColor = color;
})
$('#foo').delay(1000).backgroundColor('blue').delay(1000).backgroundColor('white').delay(1000).backgroundColor('red');
#foo {
background-color: lightgrey;
}
<div id="foo">Hey there!</div>

Javascript callback managment

I'm having trouble with designing a class which exposes its actions through callbacks. Yes my approach works for me but also seems too complex.
To illustrate the problem I've drawn the following picture. I hope it is useful for you to understand the class/model.
In my approach, I use some arrays holding user defined callback functions.
....
rocket.prototype.on = function(eventName, userFunction) {
this.callbacks[eventName].push(userFunction);
}
rocket.prototype.beforeLunch = function(){
userFunctions = this.callbacks['beforeLunch']
for(var i in userFunctions)
userFunctions[i](); // calling the user function
}
rocket.prototype.lunch = function() {
this.beforeLunch();
...
}
....
var myRocket = new Rocket();
myRocket.on('beforeLunch', function() {
// do some work
console.log('the newspaper guys are taking pictures of the rocket');
});
myRocket.on('beforeLunch', function() {
// do some work
console.log('some engineers are making last checks ');
});
I'm wondering what the most used approach is. I guess I could use promises or other libraries to make this implementation more understandable. In this slide using callbacks is considered evil. http://www.slideshare.net/TrevorBurnham/sane-async-patterns
So, should I use a library such as promise or continue and enhance my approach?

var Rocket = function () {
this.timer = null;
this.velocity = 200;
this.heightMoon = 5000;
this.goingToMoon = true;
this.rocketStatus = {
velocity: null,
height: 0,
status: null
};
this.listener = {
};
}
Rocket.prototype.report = function () {
for (var i in this.rocketStatus) {
console.log(this.rocketStatus[i]);
};
};
Rocket.prototype.on = function (name,cb) {
if (this.listener[name]){
this.listener[name].push(cb);
}else{
this.listener[name] = new Array(cb);
}
};
Rocket.prototype.initListener = function (name) {
if (this.listener[name]) {
for (var i = 0; i < this.listener[name].length; i++) {
this.listener[name][i]();
}
return true;
}else{
return false;
};
}
Rocket.prototype.launch = function () {
this.initListener("beforeLaunch");
this.rocketStatus.status = "Launching";
this.move();
this.initListener("afterLaunch");
}
Rocket.prototype.move = function () {
var that = this;
that.initListener("beforeMove");
if (that.goingToMoon) {
that.rocketStatus.height += that.velocity;
}else{
that.rocketStatus.height -= that.velocity;
};
that.rocketStatus.velocity = that.velocity;
if (that.velocity != 0) {
that.rocketStatus.status = "moving";
}else{
that.rocketStatus.status = "not moving";
};
if (that.velocity >= 600){
that.crash();
return;
}
if (that.rocketStatus.height == 2000 && that.goingToMoon)
that.leaveModules();
if (that.rocketStatus.height == that.heightMoon)
that.landToMoon();
if (that.rocketStatus.height == 0 && !that.goingToMoon){
that.landToEarth();
return;
}
that.report();
that.initListener("afterMove");
that.timer = setTimeout(function () {
that.move();
},1000)
}
Rocket.prototype.stop = function () {
clearTimeout(this.timer);
this.initListener("beforeStop");
this.velocity = 0;
this.rocketStatus.status = "Stopped";
console.log(this.rocketStatus.status)
this.initListener("afterStop");
return true;
}
Rocket.prototype.crash = function () {
this.initListener("beforeCrash");
this.rocketStatus.status = "Crashed!";
this.report();
this.stop();
this.initListener("afterCrash");
}
Rocket.prototype.leaveModules = function () {
this.initListener("beforeModules");
this.rocketStatus.status = "Leaving Modules";
this.initListener("afterModules");
}
Rocket.prototype.landToMoon = function () {
this.initListener("beforeLandToMoon");
this.rocketStatus.status = "Landing to Moon";
this.goingToMoon = false;
this.initListener("afterLandToMoon");
}
Rocket.prototype.landToEarth = function () {
this.initListener("beforeLandToEarth");
this.stop();
this.rocketStatus.status = "Landing to Earth";
this.initListener("afterLandToEarth");
}
Rocket.prototype.relaunch = function () {
this.initListener("beforeRelaunch");
this.timer = null;
this.velocity = 200;
this.heightMoon = 5000;
this.goingToMoon = true;
this.rocketStatus = {
velocity: 200,
height: 0,
status: "relaunch"
};
this.launch();
this.initListener("afterRelaunch");
}
init;
var rocket = new Rocket();
rocket.on("afterLaunch", function () {console.log("launch1")})
rocket.on("afterLandToMoon", function () {console.log("land1")})
rocket.on("beforeLandToEarth", function () {console.log("land2")})
rocket.on("afterMove", function () {console.log("move1")})
rocket.on("beforeLaunch", function () {console.log("launch2")})
rocket.launch();
You can add any function before or after any event.
This is my solution for this kinda problem. I am not using any special methods anything. I was just wonder is there any good practise for this like problems. I dig some promise,deferred but i just can't able to to this. Any ideas ?

Callback after $.each with animations

So I'm running some animations to bring in some divs in my first jQuery plugin:
$.fn.turnstile = function (options, callback) {
if (!this.length) {
return this;
}
count = this.length;
var opts = $.extend(true, {}, $.fn.turnstile.defaults, options)
var delayIt = 100;
if (opts.direction == "in") {
opts.deg = '0deg';
opts.trans = '0,0';
opts.opacity = 1;
} else if (opts.direction == "out") {
opts.deg = '-90deg';
opts.trans = "-100px, 200px";
opts.opacity = 0;
} else if (opts.direction == "back") {
opts.deg = '0deg';
opts.trans = '-2000px,0px';
opts.opacity = 0;
} else {
opts.deg = direction;
}
this.each(function (index) {
delayIt += opts.delayer;
$(this).show().delay(delayIt).transition({
perspective: '0px',
rotateY: opts.deg,
opacity: opts.opacity,
translate: opts.trans
}, 400, 'cubic-bezier(0.33,0.66,0.66,1)', function () {
if (opts.direction == "back" || opts.direction == "out") {
$(this).hide();
}
if (!--count && callback && typeof (callback) === "function") {
if ($(":animated").length === 0) {
callback.call(this);
}
}
});
});
return this;
};
Now, I'd like to call my callback when all animations are completed, which should mathematically be (delayIt+400)*count - but I can't get the callback to run when all of the animations are complete. As you might be able to tell from its current state, I've attempted to check for :animated, used the !--count condition, and even tried setting a timeout equal to the duration of the animations, but all seem to fire asynchronously. What is the best way to animate these and call something back when done?
Here's the info on the .transition() plugin.

Not tested with your code (i'm not familiar with .transition), but try this:
...
this.promise().done(function(){
alert('all done');
});
return this;
};