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
Related
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
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'm currently trying to develop a list of projects, which on mouseenter/leave triggers a function. Currently on mouse enter the background block slides out of view to the right and on mouse leave the background block slides back into view. This works as expected, but when I enter and leave multiple times, the animations trigger and jerk around - loosing the smooth scroll effect that I'm trying to achieve. How would I go around preventing the jerkiness, I've tried adding a 'disable' class, but this doesn't seem to work. Any and all advice would be helpful.
jQuery V1:
project.mouseenter(function() {
var project = $(this).hasClass('disable');
if(!project){
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').stop(true,false).velocity({left:'100%'},{duration: colourDuration, delay: colourDelay, complete: function() {
$(this).addClass('disable');
}});
$(this).find('p').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
$(this).find('button').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
}
});
project.mouseleave(function() {
var project = $(this).hasClass('disable');
if(!project){
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').stop(true,false).velocity({left:0},{duration: colourDuration, delay: colourDelay, complete: function() {
$(this).removeClass('disable');
}});
$(this).find('p').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
$(this).find('button').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
}
});
jQuery V2:
project.hover(function() {
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
$(this).find('p').velocity({height:'26px'},{duration: 500, delay: 225});
$(this).find('button').velocity({height:'26px'},{duration: 500, delay: 225});
}, function() {
$(this).find('.colour-block').velocity('stop').velocity('reverse');
$(this).find('p').velocity('stop').velocity('reverse');
$(this).find('button').velocity('stop').velocity('reverse');
});
Velocity JS
http://velocityjs.org/
Screenshot:
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'}
I have created a drop-down-menu, the html for the drop-down part basically looks like this:
<div class="menu-item">
<!-- Menu title -->
<div class="drop-down">
<!-- Content -->
</div>
</div>
I want to animate this using jQuery-Code (with the easing-plugin), but the following Code does not work:
$(".menu-item").mouseenter(activate);
$(".menu-item").mouseleave(deactivate);
function deactivate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: '0px'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
function activate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: 'auto'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
The message in the error console is: "Warning: Error in parsing value for 'height'. Declaration dropped."
If I use "height: '100px'" or somthing similar in the activate-Function it works as expected. But for maintainability reasons i want the height to be calculated autmatically, so the drop-down adapts its size to its content.
How can this be achieved?
Greetings,
Jost
I would try to use slideUp() and slideDown() for this animation. Note that those functions accept easing functions.
Other option, if for some reason you need to use animate for this, you might want to do something like this in your activate function:
function activate(){
var dropdown = $(this).find("div.drop-down");
dropdown.css('height','auto')
.hide()
.stop()
.animate(
{height: 'auto'},
{queue: false,
duration: 600,
easing: 'easeOut'
});
}
One solution could be store the height value in the deactivate method and use it when activating. I do not think that jQuery supports animating a dimension property to a string value.
var menu_handler = (function(){
var orig_height = 0;
return {
deactivate : function deactivate () {
var dropdown = $(this).find("div.drop-down");
orig_height = dropdown.height();
dropdown.stop().animate(
{height: '0px'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
},
activate : function activate () {
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: orig_height},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
};
}
$(".menu-item").mouseenter(menu_handler.activate));
$(".menu-item").mouseleave(menu_handler.deactivate));