I have an animation build with LottieJS which loops like:
var lottieLogo = lottie.loadAnimation({
container: document.getElementById('icon_logo'), // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: false,
path: 'path-to-json'
});
lottieLogo.play();
Then after animation is done I want to pause for 10 seconds like:
function logoAnimation() {
lottieLogo.pause();
setTimeout(
function()
{
lottieLogo.play();
}, 10000);
}
lottieLogo.addEventListener('loopComplete', logoAnimation);
It works fine but the only problem is that the animation disappears for about 0.2 seconds every time it loads again. Anyone familiar with this problem?
If you set loop to false it should give you the desired effect.
Related
I have an animation, which usually is supposed to play 3 times, thus the config currently says repeat: 2. However, under a certain condition (the player stops dragging an element) I want the animation to finish and stop without repeating.
By that I mean I don't want it to stop right at the frame it is at the second, but I want it to finish playing to the last frame I assigned in frames and then stop before it repeats.
How would I be able to do this?
// ANIMATION CREATED HERE
this.anims.create({
key: "nom",
frameRate: 12,
frames: this.anims.generateFrameNames("chara", {
prefix: "nom_000",
start: 0,
end: 4}),
repeat: 2,
});
this.input.on('drag', (activePointer, gameObject, dragX, dragY) => {
gameObject.x = dragX;
gameObject.y = dragY;
if(Phaser.Geom.Intersects.RectangleToRectangle(gameObject.getBounds(), character.mouth.getBounds())) {
gameState.snack_cursor.play("fries_cursor", true);
// ANIMATION PLAYED HERE
character.sprite.play("nom", true);
}
});
this.input.on('dragend', (pointer, gameObject, dragX, dragY) => {
if (gameObject.anims.isPlaying)
gameObject.anims.stop();
// ANIMATION STOPS HERE, BUT CURRENTLY AT WHATEVER FRAME IT'S AT
if (character.sprite.anims.isPlaying)
character.sprite.anims.stop();
});
You can use the function stopAfterRepeat (documentation).
Just call it with the parameter 0, and the current animation will be finished, before the animation is stopped. I think this is what you are after.
...
character.sprite.anims.stopAfterRepeat(0);
...
Is autoPlayTimeout not intended to stop autoplay:true? Because no matter what I try Owl Carousel never stops.
$('.owl-carousel').owlCarousel({
items: 1,
autoplay:true,
autoPlaySpeed:500,
autoPlayTimeout:5000,
autoPlayHoverPause:true,
loop:true,
Surely someone else wanted something other than loop forever, since that is annoying.
You can combine the 'stop.owl.autoplay' trigger with a timer and stop the carousel after going through each slide once, or twice or as much as you want.
In order to loop it twice and stop, you can use the following configurations:
loop: true
autoplayTimeout : 1000 (1 second just for the example)
items: 1
Now with these options, your slider will loop forever, showing one slide for 1 second and move to the next one.
In order to stop it after going through each slide twice, you can use the 'onInitialized' event provided by owl and call a function when the slider is initialized. Let's say you have 3 slides in total, so if you want to stop it after the second loop, you have to wait 6000ms (6 seconds).
So in the callback function, you can set a timer to stop the slider at the 6th second.
Example carousel :
let $carousel = $('.carousel');
let itemsCount = Number($('.carousel').attr("data-items"));
let autoplayTimeout = 1000;
let loops = 2;
$carousel.owlCarousel({
loop: true,
autoplay: true,
nav: true,
dots: true,
items: 1,
autoplayTimeout: autoplayTimeout,
// Stops after the second cycle
onInitialized : stopTimer({
itemsCount,
autoplayTimeout,
loops
}),
});
function stopTimer(params) {
setTimeout(
function() {
$carousel.trigger('stop.owl.autoplay');
},
params.itemsCount * Number(params.autoplayTimeout) * params.loops
);
}
You can find more events, provided by owl HERE.
Hope this will help! :)
To stop the owl carousel, you can trigger:
$('.owl-carousel').trigger('stop.owl.autoplay')
JSFiddle
I am using uikit modal on a project. I am also using JS Textillate to animate the text when the modal is opened. However, I want the text to be animated if the modal is closed and opened again continuously. For now, it only animate once when the modal is opened for the first time, when closed and opened again, the animation does not run again.
This is the JavaScript code below:
$(".uk-modal-full").on('show', function(){
var $title = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
var $title = $(".txt2").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
});
I am thinking maybe the function can be removed when modal closes so that it can be repeated when it is opened again. I am not sure if that is possible as I am only a Jquery learner.
$(".uk-modal-full").on('hide', function(){
// code here?
});
Full options for Textillate is here https://github.com/jschr/textillate
UPDATE
Thank you! I have created a codepen here to test my full code inside a modal using your example. It seems to be working but with some issues. When I use $element.textillate('in') and $element.textillate('out'), the other options do not work (e.g. initialDelay). It seems to only control the "in" and "out" options. When I used $element.textillate('start') and $element.textillate('stop'), the other options worked but when modal is reopened, the text are briefly loaded first before animating.
Please see codepen here - https://codepen.io/ajaxthemestudios/pen/XWJRBbW
Looking through the readme of Textillate, I think this section is what you need:
$element.textillate('start') - Manually start/restart textillate
$element.textillate('stop') - Manually pause/stop textillate
$element.textillate('in') - Trigger the current text's in animation
$element.textillate('out') - Trigger the current text's out animation
So I would do something like first define the animations (outside the event functions)
var title1 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
var title2 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
And then in the event function:
$(".uk-modal-full").on('show', function(){
title1.textillate('in');
title2.textillate('in');
}
EDIT
I got it to work in this codepen: https://codepen.io/thomas-short/pen/zYxdzWY
Test it by clicking on click repeatedly.
EDIT 2
The problem of the text being briefly visible seems to be a limitation of the library. I could not find a way to solve it using the tools they provide. The only way I managed to make it work is by control it myself:
$(".uk-modal-full").on('show', function(){
title1.textillate('start');
$(".txt2").hide();
setTimeout(() => {
$(".txt2").show();
title2.textillate('start');
}, 1500);
})
And remove initialDelay from the options
I'm newbie. I got a code which is working well, but how can I make it playable while mouseover and stopable when mouseout in JavaScript(jQuery). Also I want that when we'll mouseover again an animation start from start. I added a couple lines such as:
$('document').ready(function()
$('#bodymovin').hover(function()
to make hover effect, but animation is still playing when mouseover and also isn't showing my <div> until I mouseover at the start (that's not good :( ).
It would be great if you'll write comments near a lines of code. Thank you.
<script>
$('document').ready(function() {
$('#bodymovin').hover(function() {
var anim;
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data.json'
};
anim = bodymovin.loadAnimation(animData);
});
});
</script>
I am creating a pulsating effect with velocity.js as fallback for IE9, (see box2 for CSS animation )
When mouse leaves the box before the animation has finished ( stay until pulse grows than move out ) the pulsating element stays visible. https://jsfiddle.net/02vu80kc/1/
$(".box").hover(function () {
$(this).find('.effect-holder').velocity({
scale: [1.2, 0.9],
opacity: [1, 0]
}, {
easing: 'ease-out',
duration: 800,
loop: true
}, {
queue: false
}).velocity("reverse");
}, function () {
$(this).find('.effect-holder').velocity("stop");
});
How do I stop the animation on mouseout after the effect has finished ?
I am trying to stay away from .removeAttr('style') and would like the animation to finish and than stop. Any help is appreciated.
If I use this
$(this).find('.effect-holder').velocity('reverse').velocity("stop");
and you move the mouse fast the animation begins again and sometimes pauses in between.
Either use .velocity("finish") instead of .velocity("stop"), or have a different on and off animation, with both animations calling "stop" (ie, catch when the mouse moves properly).
Also note that the {... loop:true ...} means that the first animation never ends, and hence the "stop" will have the "reverse" happen immediately after stopping (call .velocity("stop", true) to prevent that)
edit: Open issue on the "finish" bug - https://github.com/julianshapiro/velocity/issues/495
edit2: Add simple example:
$("box").hover(function() {
// over
this.velocity("stop", true).velocity({
scale: [1.2, 0.9]
}, {
duration: 800,
loop: true
})
}, function() {
// out
this.velocity("stop", true).velocity({
scale: 0.9
}, {
easing: "ease-out",
duration: 800
})
});