CODEWITHSUNDEEP
javascriptanimation
vcvd
vcvd

Reputation: 422

How to animate a hidden element with anime.js

I would like an element to appear along with an animation from anime.js when a click is triggered.

That means the element should be initially hidden or with opacity = 0.

I have attached a demo below. The element is not hidden, as I don't know how to change it from hidden to visible with anime.js while the drawline animation takes place.

JS

var lineDrawing = anime({
  targets: 'polyline',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  duration: 1000,
  autoplay: false
});

document.querySelector('.play-drawing').onclick = lineDrawing.restart;

HTML

<div class="container">

<div id="anime-demo">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#03a9f4;stroke-miterlimit:10;stroke-width:2px;}</style></defs>
    <polyline class="cls-1" points="100 0 0 0 0 100 100 100 100 40"/></svg>
</div>
</div>
<div >
<button class="play-drawing">Draw the Anchor</button>
</div>

I have a demo in the following snippet

var lineDrawing = anime({
  targets: 'polyline',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  duration: 1000,
  autoplay: false
});

document.querySelector('.play-drawing').onclick = lineDrawing.restart;
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

.container{
  width:30%;
}
#anime-demo {
  position: relative;
}

svg {
   padding: 10px;
   position:relative;
   top:0px;
}

button {
  background: orange;
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}
.text{
  width:80%;
  padding-left:10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="container">

<div id="anime-demo">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#03a9f4;stroke-miterlimit:10;stroke-width:2px;}</style></defs>
    <polyline class="cls-1" points="100 0 0 0 0 100 100 100 100 40"/></svg>
</div>
</div>
<div >
<button class="play-drawing">Draw the Anchor</button>
</div>

Upvotes: 0

Views: 3707

Answers (1)

hulvire
hulvire

Reputation: 11

first you should anime "path" except "polyline". I use this for converting:

https://codepen.io/jakealbaugh/pen/GZwgzV

and about opacity you could do:

opacity: [
{ value: [0, 1], duration: 300, easing: 'easeOutQuad' }
  ],

here is my example:

https://codepen.io/hulvire/pen/KoVrZb

Upvotes: 1

Related Questions