Related
The documentation has both Events and EventListeners. I can get the EventListeners to fire but the Events do not have adequate documentation for me to get going. What is the difference and how do you use? Thank you.
https://github.com/airbnb/lottie-web#events
Events (Do not work, how to use?)
// From the Documentation
onComplete
onLoopComplete
onEnterFrame
onSegmentStart
you can also use addEventListener with the following events:
complete
loopComplete
enterFrame
segmentStart
config_ready (when initial config is done)
data_ready (when all parts of the animation have been loaded)
data_failed (when part of the animation can not be loaded)
loaded_images (when all image loads have either succeeded or errored)
DOMLoaded (when elements have been added to the DOM)
destroy
// End Documentation
From the standard addEventListener usage, this works...
birbSequence.addEventListener('loopComplete', (e) => {
console.log(e);
});
although 'complete' does not fire.
But to try out the stuff in Events like onEnterFrame?
var birbSequence = lottie.loadAnimation({
container: bodyMovinContainer1,
loop: true,
renderer: 'svg',
path: 'Birb Sequence 1.json',
onEnterFrame: function(e) { console.log(e); }
});
I am really new to using Lottie though so could use some help.
Just want a way to see how to use Events
Let's say we have our lottie animation:
const anim = lottie.loadAnimation({
container: '#container',
renderer: 'svg',
loop: true,
autoplay: true,
...
})
With Events:
anim.onComplete = function() {
console.log('complete')
}
anim.onLoopComplete = function() {
console.log('loopComplete')
}
With addEventListener:
anim.addEventListener('complete', function() {
console.log('complete')
})
anim.addEventListener('loopComplete', function() {
console.log('loopComplete')
})
You can use the addEventListener method to listen to all the events instead of the on* series of event hooks.
const options = {
container: '#container',
loop: false,
autoplay: false,
renderer: 'svg',
rendererSettings: {
scaleMode: 'noScale',
clearCanvas: false,
progressiveLoad: true,
hideOnTransparent: true,
},
};
try {
const anim = lottie.loadAnimation({ ...options, path: 'URL_TO_JSON' });
anim.addEventListener('complete', () => { console.log('complete'); });
anim.addEventListener('loopComplete', () => { console.log('loopComplete'); });
anim.addEventListener('data_ready ', () => { console.log('data_ready'); });
anim.addEventListener('data_failed', () => { console.log('data_failed'); });
anim.addEventListener('enterFrame', () => {
console.log('enterFrame', anim.currentFrame);
});
// etc ...
} catch (error)
console.log('error loading anim');
}
Hope that helps!
I'm trying to animate a series of SVG objects. Here's the basic goal: The first set of 4 objects animates in, then out, and then the next set of objects animate in. While the first 2 queue up just fine, I'm not sure of the best method to get the second set to wait until the first set finishes.
Here's my code:
JS:
$( document ).ready(function() {
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightOut", {stagger: 200, drag: true });
$('.tr0,.tr1,.tr2,.tr3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
})
UPDATE: Here's my solution, but I'm bothered by utilizing a delay rather than a queuing method.
$( document ).ready(function() {
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandIn", {stagger: 200, drag: true });
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandOut", {stagger: 200, drag: true, delay: 1000 });
$('.tr0,.tr1,.tr2,.tr3').velocity({opacity: 0}, {duration:0 });
$('.tr0,.tr1,.tr2,.tr3').velocity("transition.expandIn", {stagger: 200, drag: true, delay: 3000 });
})
Use the callbacks?
$('.dt0').velocity({
opacity: 0 //or animation name
}, {
complete: function(elements) {
$('.dt1').velocity({
opacity: 0 //or animation name
}, {
complete: function(elements) {
//... the others
},{duration:200, delay:2000 } //2s delay
});
},{duration:1000 }
});
I have the following jQuery animate function:
$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' },
function () {
alert('hi');
}
);
The animation itself works. $myDiv slides with the easeInOutExpo effect, as desired. However, the callback function is never fired. To test it, I changed the callback to just alert("hi");, as you can see above. Still doesn't work.
What could I be doing wrong?
Try this
Demo: jsFiddle
$("#myDiv").animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' ,
complete:function () {
alert('hi');
}
}
);
There are a couple of things that need fixing here:
Make sure you've included jQuery UI in your code, because easeInOutExpo is not part of the standard jQuery library.
Your syntax is wrong: you're mixing up the two different options for the animate() function.
It's either
$(element).animate(properties [,duration] [,easing] [,complete]);
or
$(element).animate(properties, options)
where options is an object formatted like this:
{
duration: number,
easing: string,
complete: function,
}
You've gone with the second option, so you need to format it properly to use the complete attribute of the options object for your function:
$myDiv.animate({
"left": "0%",
}, {
duration: 1000,
easing: "easeInOutExpo",
complete: function () {
alert('hi');
},
});
Demo
Alternatively, you could use the first format option:
$("#myDiv").animate({
"left": "0%",
}, 1000, "easeInOutExpo", function () {
alert('hi');
});
Demo
One way is use of JQuery Promise
$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' }).promise().done(function(){
alert('hi done');
});
Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/
Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/
I have the following animations in my web page:
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
$(this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
Currently both the animations are running simultaneously. I want the second animation to run after the first one. I tried putting the second one inside the callback function, but cannot find a way to get the $(this) reference working. Any idea how to get this working?
Thanks in advance.
Your function is wrong, if you are declaring options, then the callback goes in the options object:
$(".anim-item").animate({
opacity: 1,
}, {duration: 1000, queue: true, complete: function() {
$(this).animate({
left: 200,
}, { queue: true, duration: 1000, complete: function() {
// Animation complete.
}});
}});
Also, don't make a global variable containing the item, that's just asking for trouble, especially as jquery will maintain it for you in this instance, if you need to declare a new variable for the object in chaining, generally you are not doing it right ;)
Two ways:
cache this in a local variable before calling .animate()
use .proxy() to pass your this reference to .animate()
example 1:
var func = function(){
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
self.animate({});
});
};
example 2:
var func = function(){
$.proxy($(".anim-item").not(this).animate({
}), this);
};
Save it under a different name, like this:
var myThis = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(myThis).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});
The closure of the inner function will make sure it's visible.
Make an alias for this via
var _this = this;
If you write a jQuery query $('.abc') and use functions like click, hover etc, this will always reference to current DOM node jQuery is processing.
Store this in a local variable.
var _this = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete. Next animation
$(_this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
}
);
In a jQuery callback function this is always set to the DOM element that the function applies to.
If you want access to this in your first callback function you'll have to create a reference to it before you animate:
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(self).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});