CODEWITHSUNDEEP
javascriptcssanimationcss-animationsanime.js
romido
romido

Reputation: 45

How to animate sentence with anime js instead of css animation?

I want to create an animation on a sentence. I want that the last word of the sentence changes by fading out and then displaying another word.

like this: I love ice cream (them 'ice cream' fades out and gets replaced by 'cookies' and after that 'cake')

I managed to get this done with css animations but i really want to do this with animate js/javascript.

I get how to animate the sentence but don't know i would would let the words replace each other with javascript or anime js.

some help or advice would be nice :)

<h1 class="sentence">I love
  <div class="slidingHorizontal">
      <span>ice cream</span>
      <span>blue</span>
      <span>candy</span>
      <span>dogs</span>
      <span>running</span>
  </div>
 </h1>

/*Horizontal Sliding*/
.slidingHorizontal{
    display: inline;
    text-indent: 8px;
}
.slidingHorizontal span{
    animation: leftToRight 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.slidingHorizontal span:nth-child(2){
    animation-delay: 2.5s;

}
.slidingHorizontal span:nth-child(3){
    animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
    animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
    animation-delay: 10s;
}

/*leftToRight Animation*/
@-webkit-keyframes leftToRight{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateX(-50px); }
    10% { opacity: 1; -webkit-transform: translateX(0px); }
    25% { opacity: 1; -webkit-transform: translateX(0px); }
    30% { opacity: 0; -webkit-transform: translateX(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

I tried to do the animation with anime js like this:

anime({
        targets: 'h1',
        translateX: -20,
        opacity: 0,
        loop: true,
        easing: 'linear',
        duration: 2000
    });

please tell me how to get this done with anime js/javascript. codepen

Upvotes: 1

Views: 1158

Answers (1)

Pavel
Pavel

Reputation: 310

To achieve this affect you need to use staggering and keyframes animation 

anime({
  targets: '.slidingHorizontal span',
  keyframes: [
    {translateX: -50, opacity: 0, duration:0},
    {translateX: 0, opacity:1, duration:500},
    {translateX: 50, opacity:0,delay: 2000, duration:500},
  ],
  easing: 'linear',
  delay: anime.stagger(2500, {start: 0}),
  loop: true
});
/*Horizontal Sliding*/
.slidingHorizontal {
	display: inline;
	text-indent: 8px;
}
.slidingHorizontal span{
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
<script src="https://animejs.com/lib/anime.min.js"></script>
<h1 class="sentence">I love
  <div class="slidingHorizontal">
      <span>ice cream</span>
      <span>blue</span>
      <span>candy</span>
      <span>dogs</span>
      <span>running</span>
  </div>
</h1>

Upvotes: 1

Related Questions