Why does width:0 not animate (anime.js) - javascript

I am trying to create an animation with the width of an element, but even this basic code doesn't work and I can't figure out why, maybe someone can.
<script src="anime.min.js"></script>
<script src="jquery-3.1.0.js"></script>
<div id="centered">
</div>
<style>
#centered {
width: 500px;
height: 40vh;
background-color: blueviolet;
}
</style>
<script>
let t = anime.timeline({
target: '#centered',
loop: false,
autoplay: false,
width: 0,
duration: 1000,
});
t.play();
</script>

How about the following solutions?
Example 1 (With timeline)
var t = anime.timeline({
duration: 1000,
loop: false,
autoplay: false,
});
t.add({
targets: '#centered',
width: 0
})
t.play();
Example 2 (Without timeline)
var t = anime({
duration: 1000,
loop: false,
autoplay: false,
targets: '#centered',
width: 0
});
t.play();
For more information, it's better to check an official document.
https://animejs.com/documentation/

Your 'target' should be targets (plural). Following documentation, you should be adding (what I would call) keyframes via .add according to the timeline basics. Not certain if you need it explicitly.
let t = anime.timeline({
targets: '#centered',
loop: false,
autoplay: false
});
t.add({ width: 0, duration: 1000 });
t.play();
#centered {
width: 27px;
height: 40vh;
background-color: blueviolet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="centered">
</div>

Related

jQuery inView with anime.js only fire once

I'm making an animation atm and wanted to animate a text once when I scroll there. Here is the code. The code works all fine I don't know why it won't work here. But I saw that the text fires every time I scroll there. How can I prevent this? So it only fires once?
var fadeUpNormal = anime.timeline({
loop: false,
autoplay: false,
}).add({
targets: '.fade-up-normal',
translateY: [100,0],
opacity: [0,1],
translateZ: 0,
easing: 'easeOutExpo',
duration: 1400,
delay: 1000;
});
$('.scroll-trigger').on('inview', function(event, isInView) {
if (isInView) {
fadeUpNormal.play();
} else {}
});
div {
background-color: #444;
height: 1000px;
display: flex;
justify-content: center;
align-items: center;
}
#wwrp1 {
color: black;
font-size: 3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div>
<div>
<p class="fade-up-normal scroll-trigger" id="wwrp1">This is an example</p>
</div>
</div>
The solution is just to use .one('inview') for .on('inview'). That was my bad!

Slick JS - How to reload content with ajax data

I have data in slick js slider
I want to reload another data and reinit slick with new data.
I tried this :
Here is the function:
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
code for re-init slider
var data = "<div>a</div><div>b</div>";
$("#categorySlider-13").slick('reinit');
$("#categorySlider-13").html(data);
$("#categorySlider-13").slick(getSliderSettings());
But it doesnt work !
If You know another js plugin carousel working with ajax call, can you tell it to me please ?
You need to call $("#categorySlider-13").slick('unslick') before assigning new data then init again.
Also, it advised to use .not('.slick-initialized'), so you done accidentally initialize slider more than once See here for more
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
$("#categorySlider-13").slick(getSliderSettings());
$('#btn1').on('click',function(){
var data = "<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>";
$("#categorySlider-13").slick('unslick')
$("#categorySlider-13").html(data);
$("#categorySlider-13").not('.slick-initialized').slick(getSliderSettings());
});
$c1: #3a8999;
$c2: #e84a69;
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section id ="categorySlider-13" class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
<button id="btn1" >
Click me!!
</button>

Loop animation with javascript

I got stuck on a looping animation till the end of page, so it should continue where it left off. Here is link to code pen
var width = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var granica = width * 10 / 100;
console.log(width);
var animacija = anime({
targets: ".glavniDiv img",
easing: 'linear',
delay: 200,
translateX: [{
value: [0, 50],
duration: 500,
},
{
value: '+=50',
duration: 500,
}
],
translateY: [{
value: [-25, 25],
duration: 500,
},
{
value: '-=25',
duration: 500
}
],
});
.glavniDiv img {
height: 70px;
width: auto;
position: fixed;
top: 50%;
margin-top: -50px;
left: 10%;
}
.glavniDiv {}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="glavniDiv">
<img src="https://technabob.com/blog/wp-content/uploads/2011/11/111711_rg_8BitHeroes_03.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
I tried with for loop and didn't work so i don't know if i tried it wrong way or what

Anime.js how to reverse this animation?

I've recently started working with Anime.js to animate my designs and I´ve been stuck in this for a while now, bet for many this is very simple!
I have a button that enlarges my div and would like to have the div in its initial state if the icon is clicked again.
My HTML:
var boxGetsLarger = anime({
targets: '.agent-button',
width: {
value: '+=300',
duration: 200,
easing: 'linear'
},
borderRadius: {
value: 83
},
duration: 200,
height: {
value: '+=20'
},
easing: 'linear',
autoplay: false
});
document.querySelector('.agent-button').onclick = boxGetsLarger.play;
.agent-button {
display: flex;
justify-content: space-between;
border-radius: 100px;
background: #ffffff;
box-shadow: 0pt 2pt 10pt #0000001f;
height: 91px;
width: 91px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
<img src="img/audio-bars.svg">
</div>
It is shame there is no built-in toggle function but there is a reverse function what this does is toggle the internal attribute reversed which, in turn, controls what the play function does.
In theory, you can just call reverse after play like so
var boxGetsLarger = anime({
targets: '.agent-button',
width: {
value: '+=300',
duration: 200,
easing: 'linear'
},
borderRadius: {
value: 83
},
duration: 200,
height: {
value: '+=20'
},
easing: 'linear',
autoplay: false
});
document.querySelector('.agent-button').onclick = function() {
boxGetsLarger.play();
boxGetsLarger.reverse();
}
.agent-button {
display: flex;
justify-content: space-between;
border-radius: 100px;
background: #ffffff;
box-shadow: 0pt 2pt 10pt #0000001f;
height: 91px;
width: 91px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
<img src="img/audio-bars.svg">
</div>
Only I found reverse was running before play was finished leading to some strange behaviour, I'd recommend taking advantage of the 'finished' promise built-in like so
var boxGetsLarger = anime({
targets: '.agent-button',
width: {
value: '+=300',
duration: 200,
easing: 'linear'
},
borderRadius: {
value: 83
},
duration: 200,
height: {
value: '+=20'
},
easing: 'linear',
autoplay: false
});
document.querySelector('.agent-button').onclick = function() {
boxGetsLarger.play();
boxGetsLarger.finished.then(() => {
boxGetsLarger.reverse();
})
}
.agent-button {
display: flex;
justify-content: space-between;
border-radius: 100px;
background: #ffffff;
box-shadow: 0pt 2pt 10pt #0000001f;
height: 91px;
width: 91px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
<img src="img/audio-bars.svg">
</div>
This will now only reverse the direction when play is finished.
I hope you find this helpful.
I use this to toggle anime.js animations on a single button.
To initiate reverse() the animation must have run once. You can check this by evaluating the property: 'began'. The first time your animation runs this property will be set 'true'.
console.log(boxGetsLarger); // began: false
document.querySelector('.agent-button').onclick = function() {
boxGetsLarger.play();
if (boxGetsLarger.began) {
boxGetsLarger.reverse();
}
console.log(boxGetsLarger); // began: true
}
What fixed it for me was juliangarnier/anime#577 (comment):
I encountered this issue today, here is my solution as a pen.
I think the confusion arises from when animations are paused, and how the reverse() method works:
Non-looped animations are automatically paused when they reach the end (or beginning when reversed).
The reverse() method only changes the playback direction, and doesn't unpause a paused animation.
Doing reverse() on an animation while it is in progress means it will continue to play in the opposite direction, but if the animation is at the beginning/end (i.e. paused), you will also need to do play() to get it started again.
From his linked CodePen:
function toggle() {
if (anim.began) {
anim.reverse()
if (anim.progress === 100 && anim.direction === 'reverse') {
anim.completed = false
}
}
if (anim.paused) {
anim.play()
}
}
Give this a try: (from docs)
boxGetsLarger.reverse();
I used this to toggle back and forth between an "open" state and a "closed" state.
const toggle = (animation, open) => {
if (open) {
animation.play();
if (animation.reversed) {
animation.reverse();
}
} else {
animation.play();
if (!animation.reversed) {
animation.reverse();
}
}
}

cycle jquery plugin is taking width:100% and giving it to left style on option scrollHorz

I'm making a slideshow that works with a responsive layout. After hours of work the slideshow is now responsive to the layout, but because of the width being 100% options fn:'scrollHorz' isn't working correctly. Because the width: 100% is being given to the left: style on the class. So my question is how can I get this to work. I would really appreciate any help.
This is my markup
<div id="test">
<section>
<img src="images/sliderContent_1.png" alt="Slide 1" />
</section>
<section>
<img src="images/sliderContent_1.png" alt="Slide 2" />
</section>
<section>
<img src="images/sliderContent_1.png" alt="Slide 2" />
</section>
</div>
this my css
section {
margin: 0;
}
img {
max-width: 100%;
}
img.loading {
margin-bottom: 2em;
visibility: hidden;
}
#page-wrapper-test {
width: 100%;
margin: 0 auto;
}
#test {
width: 100%;
}
div.loading {
width: 100%;
}
#test section { width: 100%; }
and this is my script
$(document).ready(function() {
$('#test').prepend('<img class="loading" src="images/loading.gif" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
slideExpr: 'section',
fx: 'scrollHorz',
timeout: 0,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
fit: 1,
});
});
Did you try setting the slideResize to false? This way the cycle pluggin doesn't change your css props.
Doesn't work with 100% width
I had the same problem, but with scrollVert, and this solved the issue.
You need to set height property for your jQuery cycle. There's some strange behavior with scrollHorz. I'd suggest you to use scrollLeft instead. But then you would need to set custom function for pager to scrollRight when needed.
Here's how your JS snippet should look like:
$('#test').prepend('<img class="loading" src="" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
slideExpr: 'section',
fx: 'scrollLeft',
timeout: 1000,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
height: "100px",
fit: 1,
});
Here's how you can use custom functions for your pager:
var $test = $('#test');
$test.prepend('<img class="loading" src="" />');
$test.after('<div id="nav" class="nav">');
$test.cycle({
slideExpr: 'section',
fx: 'scrollLeft',
timeout: 2000,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
height: "200px",
fit: 1,
after: function(currSlideElement, nextSlideElement, options) {
slideIndex = options.currSlide;
nextIndex = slideIndex + 1;
prevIndex = slideIndex -1;
if (slideIndex == options.slideCount-1) {
nextIndex = 0;
}
if (slideIndex == 0) {
prevIndex = options.slideCount-1;
}
},
pageAnchorBuilder: function(idx, slide) {
return '' + idx + 'a';
}
});
var $navChildren = $('#nav').children();
$navChildren.unbind('click');
$navChildren.click( function(e) {
var idx = $navChildren.index(this);
if (idx < slideIndex) {
$test.cycle( idx, 'scrollRight' );
}
else if (idx > slideIndex) {
$test.cycle( idx );
}
e.preventDefault();
});
Check it out here:
http://jsfiddle.net/vfonic/uTpqB/
Cycle makes the next child level of elements down from the parent slideshow container the slides. In your example <section>.
You should define the height and width of the slide elements in your CSS. Otherwise when (document).ready fires and your images are partially loaded you will get unexpected results.

Categories

Resources