I can add animations to anime timeline using the timeline.add({parameters}) function. Is it possible to remove all the previously added animations and reset the whole timeline?
Thanks,
You can reset the timeline by calling the restart method:
const tl = anime.timeline({
duration: 400,
easing: 'easeInOutQuad',
})
tl.add({
targets: '.box',
rotate: 360,
translateX: {
value: 400,
delay: 400,
}
})
document.querySelector('button').addEventListener('click', () => {
tl.restart();
});
Related
I'm using GSAP with ASScroll to add a couple of animations to my static site generated with Hugo. All animations work as intended. However when I reload the page only when I'm not scrolled all the way up the animations will go to the last frame and stop. The same thing occurs when the toolbar of Chrome mobile goes all the way up after you scroll down far enough. This occurs on very consistent spots, but not everywhere. For example when scrolling 600px down it would always occur, but at 700px it would never occur.
I'm not getting any errors or warning in the console.
using:
#ashthornton/asscroll 2.0.11
gsap 3.11.3
main.js setup
import ASScroll from '#ashthornton/asscroll'
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import {
Timeline
} from 'gsap/gsap-core';
gsap.registerPlugin(ScrollTrigger);
const isTouch = ('ontouchstart' in document.documentElement);
const asscroll = new ASScroll({
disableRaf: true,
ease: 0.175,
touchEase: 0.175
});
gsap.ticker.add(asscroll.update);
ScrollTrigger.defaults({
scroller: asscroll.containerElement
});
ScrollTrigger.scrollerProxy(asscroll.containerElement, {
scrollTop(value) {
return arguments.length ? asscroll.currentPos = value : asscroll.currentPos;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
}
});
asscroll.on("update", () => ScrollTrigger.refresh());
ScrollTrigger.addEventListener("refresh", asscroll.resize);
window.addEventListener("load", () => {
// ...
Animation:
const imgMicroservice = document.getElementById('img-microservices');
gsap.timeline({
scrollTrigger: {
trigger: imgMicroservice,
start: "top bottom",
onRefresh: () => {},
end: "bottom top",
invalidateOnRefresh: false,
scrub: 1,
},
})
.fromTo(imgMicroservice, {
y: 150,
scale: 0.96,
ease: "none"
}, {
y: 0,
ease: 0,
scale: 1,
rotate: "0deg",
}, 0)
I tried disabling ASScroll, this solved the problem. Though I want to use it or any other smooth scroll js library.
I'm trying to tween a sprite from one point to another and have it fade away while it's moving. I've tried this:
const tween = game.tweens.add({
targets: [log.sprite],
x: fire.x,
y: fire.y + (fire.height * 0.2),
opacity: 0,
duration: 300,
repeat: 0,
onComplete() {
destroyLog(log);
resolve();
},
});
But this doesn't work. I'm having a lot of trouble finding good API docs for Phaser 3, so I'm not sure where I should be looking for this information.
You probably should use alpha instead of opacity. Below is a working example for Phaser3. The start and end value lambdas are good just for flexibility. I guess you can replace them by values directly. this refers to Phaser.Scene instance.
this.add.tween({
targets: [sprite],
ease: 'Sine.easeInOut',
duration: 1000,
delay: 0,
x: {
getStart: () => startX,
getEnd: () => endX
},
y: {
getStart: () => startY,
getEnd: () => endY
},
alpha: {
getStart: () => startAlpha,
getEnd: () => endAlpha
},
onComplete: () => {
// Handle completion
}
});
You can easily find helpful usage examples for Phaser 3 by cloning the repo locally and searching for some keywords in the code.
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');
});
How can i push my content the same as another content? OK i know the question seems kind of vague but what I want to do is push my content like the way another script is pushing its content. What is doing when clicking the button it will push the content from the side causing the div to contract. I am not too far so maybe somebody can help. This is the script that works:
$(function(){
var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
$trigger.toggle(function show() {
$menu.animate({ width: 185, marginLeft: 0, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:185, display:'toggle'}, 'slow');
}, function hide() {
$menu.animate({ marginLeft: -185, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:0, display:'toggle'}, 'slow');
});
})
http://jsfiddle.net/Ndvbn/2/
Here is the script that needs just a small touch up so that it will push the content just like the script above does when clicking on test. Here is the script:
var timer;
$("#slideout").animate({right:'0px', queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: "slow"})
}, 500);
});
$("#clickme2").click(function () {
if ($("#slideout").css("right") == "-280px"){
$("#slideout").animate({right:'0px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});
} else {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});}
});
http://jsfiddle.net/5UpHk/4/
Can anybody post the code so that my second script will push the content to the left?
This script below will push the content to the left. I made a couple of changes to the CSS as well. Check out the demo and code here: http://jsfiddle.net/BdKhW/1/
var timer;
$("#slideout").animate({width:'275px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
}, 2000);
});
$(".c_left").animate({marginRight:'275px'}, {queue: false, duration: "slow"})
$("#clickme2").click(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
});