Animation on element

Hey VirtuHouse,
This can be done with Keyframe Animations this article is pretty good but if you search Google I’m sure you will find more examples. In the example below I created a page with two text blocks, one has left text alignment and the other right, in the custom classes for each element I used either text-box-left or text-box-right

then I used this css:

@keyframes slide-in-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }


  .text-box-right {
    animation: slide-in-right 1000ms;
  }
  .text-box-left {
    animation: slide-in-left 1000ms;
  }

and now on page load the text slides in

this basic example can be applied to other elements, or you can search for more advanced examples, but this should help you get started.

Best regards,
Mike

Hi,
Thank you Guenni007 this is a good point.
So to expand on the above example to trigger the animation when the element is in view and not just on page load, we will add the class avia_animate_when_visible to the custom class with a space after the text-box-left or text-box-right classes

and changed the css to this:

  @keyframes slide-in-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }


  .text-box-right.avia_start_animation {
    animation: slide-in-right 1000ms;
  }
  .text-box-left.avia_start_animation {
    animation: slide-in-left 1000ms;
  }

note the avia_start_animation class in the css, the waypoint script that Guenni007 pointed out changes the avia_animate_when_visible class to avia_start_animation so the css will work.

Best regards,
Mike