I have text animated in JavaScript and CSS but the problem is that text is repeated constantly. How I can stop repeating after is shown once and stay displayed.
Javascript code is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.slogan');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.slogan .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.slogan',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
The final result that I need is an after-show slogan to stay like that till customers refresh the page and stop repeating after 1 time.
Thanks all
Related
I wanted to use animate to translate and fade element but the opacity property doesn't affect the animation.
I've got so far :
let timeline1 = anime.timeline();
timeline1.add({
targets: '#operation .letter',
translateY: [0,40],
opacity: [0, 1],
easing: "linear",
duration: 300,
delay: (el, i) => 30 * i
})
Translation and other properties work nicely but it seems that it doesn't change the opacity as a css property but as an attribute.
In the HTML, once rendered, the targets shows:
<span class="letter" opacity="1" style="transform: translateY(40px);">p</span>
It seems to get opacity as an attribute not like a css property
I tried to opacity: 1, and opacity:"1" both didn't change the animation
Thanks in advance,
I set the "opacity" property to 0 in the .css and configured the script like this:
var timeline = anime.timeline();
timeline.add({
targets: '#home-intro',
opacity: 1,
duration: 4000,
}
);
Everything works fine, with and without timeline.
I have a button which I want to have play two animations at the same time(if possible, 1 second between them) when I click on it. The animations are made using animeJS.
Button code <button type="button" id="button2">Press to start</button>
Animate Script
var animate1 = anime({
targets: '#button2',
//top: '70%',
translateY: 500,
autoplay: false,
easing: 'spring(1, 80, 10, 0)'
});
var animate2 = anime({
targets: '#content',
//top: '70%',
translateY: 500,
autoplay: false,
easing: 'spring(1, 80, 10, 0)'
});
function animateAll() {
animate1.restart;
animate2.restart;
}
document.querySelector('#button2').onclick = animateAll();
function animateAll() {
animate1.restart();
animate2.restart();
}
use animate.restart() instead of animate.restart when animateAll is executed.
Only use parenthesis to execute the function ,use only name of
function when you want to assign it to a click handler.
You need to remove parentheis from animateAll when use are assigning it to the onclick handler.
document.querySelector('#button2').onclick = animateAll;
New code should be :-
function animateAll() {
animate1.restart();
animate2.restart();
}
document.querySelector('#button2').onclick = animateAll;
you can also use animate1.play(),animate2.play() instead of animate1.restart(),animate1.play()
I have this effect of anime js
$(function(){
var bouncingBall = anime({
targets: '.box',
translateY: '50vh',
duration: 300,
loop: 4,
direction: 'alternate',
easing: 'easeInCubic'
});
});
How can I run the animation only when I'm clicking on a button, so let's say I have in my HTML:
<div class="box">Button</div>
OK, I got it, In the javascript I should have had this line
document.querySelector('.box').onclick = bouncingBall.play;
so when I click on the class box it will animate the bouncingBall
Your js code should look like this:
$(function(){
var bouncingBall = anime({
targets: '.box',
translateY: '50vh',
duration: 300,
loop: 4,
direction: 'alternate',
easing: 'easeInCubic',
autoplay: false //if you don't want play animation on page load
});
document.querySelector('.box').onclick = bouncingBall //onclick event
});
Documentation: http://animejs.com/documentation/#playPause
I'm trying to create a sequential animation using velocity.js that loops 3 times and stops.
In the example below I've queued nested functions to create a sequence one after the other. Then tried to loop that function 3 times using a 'for loop' but its only running once.
I should mention I've only just started learning javascript. I've opted with velocity.js for web animations as an alternative to using Flash for banners etc.
Erroneous code so far:
var i = 0;
var loopNo = 3;
function anim8() {
$( "#logo" )
.velocity( { width: "260px", opacity: 1, left: "20px", top: "80px" }, { delay: 0, duration: 1000 } )
.velocity("fadeOut", { delay: 1000, duration: 1000 })
.queue(function() {
$( ".copy" )
.velocity({opacity: 1, translateX: "300px"},{duration: 1000})
.velocity("fadeOut", { delay: 1000, duration: 1000})
.queue(function() {
$( "#img" )
.velocity({opacity: 1, translateY: "300px"},{duration: 1000});
$( ".outro" )
.velocity({opacity: 1, translateX: "-190px"},{duration: 1000});
$( ".button" )
.velocity({opacity: 1, translateY: "-70px"},{duration: 1000});
});
});
}
$(document).ready(function(){
for (i = 1; i < loopNo; i++) { anim8 (); }
});
I'm sure the answer is going to be obvious to someone but have spent a few hours without progressing. If you can explain the correct way to loop an animation of nested sequences that would be great!
Live demo: JS-BIN
Which property of google chart adds the Animation in column chart from top to bottom ?
By Adding
animation: {duration: 10000, easing: 'out',}
in option is enough or we need to add something else also for that ?
yes it is enought add
animation: {
duration: 1000
}
have a look in this example that I have found
refer this page for documentation about animation property
example
function init() {
var options = {
width: 400,
height: 240,
animation:{
duration: 1000,
easing: 'out'
},
vAxis: {minValue:0, maxValue:1000}
};
You should delete the last comma ,.
Try with this:
animation: {duration: 10000, easing: 'out'}