Pingendo Help Center

HOW TO add simples animations to elements

Hi guys,

Just follow the steps :wink:


STEP 1: Add this code in you HTML file (or you can download it to local resources).


<script src="https://d33wubrfki0l68.cloudfront.net/js/fe6311b3c294cba469a3939f21603640522c41e5/aquamarine/js/animate-in.js"></script>

a1


STEP 2: Add this style in your CSS file.


.animate-in-left {
  transition: all 1.0s ease-out;
	position:relative;
  opacity:1;
	left:0%;
  &.out-of-viewport {
    opacity:0;
      left:-5%;
  }
}


.animate-in-right {
  transition: all 1.0s ease-out;
	position:relative;
  opacity:1;
	left:0%;
  &.out-of-viewport {
    opacity:0;
    left:5%;
  }
}

STEP 3: Add a class “animate-in-left” or “animate-in-right” to the element you want to animate.


a2


RESULTS WHEN SCROLLING DOWN:


gif1
gif2

1 Like