Give us feedback
animejs
Reactive icon

AnimeJS

version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 25 March 2021 by 
TheDon
4.5
 (2 ratings)
animejs

AnimeJS

Documentation
1.0.0

This application encapsulates the Anime JS library in order to animate various types of objects.

Currently the applications offers three components:

  1. AnimateByClass - Animates the elements in the placeholder based on the input StyleClass provided, in which the elements must have the class in order to be animated.
  2. AnimateByClassWithKeyFrames - Animates the elements in the placeholder based on the input StyleClass provided, in which the elements must have the class in order to be animated, with the addition of Key Frames. (Work in Progress)
  3. AnimateByElementId - Animates the element in the placeholder based on the input ElementId provided, in which the element must have the id in order to be animated.

Common elements between the components:

  1. ElementsToBeAnimated - A placeholder for the elements that are going to be animated;
  2. IsActive - A Boolean input that tells the component to start animating the elements;
  3. TranslateX - if the element will move in the X-direction by N amount of px, for example: 250 would be 250px of movement to the right of the original place;
  4. loop - if the element repeats the animation, if it repeats it should be "true", if not you can leave it blank, more values are possible, like integers to loop a certain number of times
  5. Direction: Defines the direction of the animation:
    1. 'normal' - Animation progress goes from 0 to 100% - if the translateX is 250, then it will move from 0 to 250
    2. 'reverse' - Animation progress goes from 100% to 0% - if the translateX is 250, then it will move from 250 to 0
    3. 'alternate' - Animation progress goes from 0% to 100% then goes back to 0% - if the translateX is 250, then it will move from 0 to 250 to 0 again
  6. Delay – Encapsulates the delay functions, to delay the animation by Nms (Note: this causes staggering effect for multiple element animation, future plans to add a new input to differentiate the staggering from the delay itself are going to be outlined, with a default of True to be able to accommodate users that already have its feature on purpose)
  7. EndDelay - Encapsulates the end delay functions, to delay the end of the animation by Nms (Note: this causes staggering effect for multiple element animation, future plans to add a new input to differentiate the staggering from the delay itself are going to be outlined)
  8. Duration - Defines the duration in milliseconds of the animation.
  9. BackgroundColor – Defines a new background-color of the elements
  10. Easing - Stagger values using an easing, to control how the animation flows, for more detail, you can go to the library itself at https://animejs.com/documentation/#easings
  11. Width – stretches the element into the inputted width, for example: 100%, goes from the initial value of the element to the 100% width of the container
  12. BoarderRadiusX - first element of the borderRadius array - is the beginning borderRadius of the element; (May change in future releases)
  13. BoarderRadiusY - second element of the borderRadius array - is ending borderRadius of the element; (May change in future releases)

Keyframes(WIP) specific fields:

Right now the Keyframes are implemented in a superficial way for simple animations, with:

  1. KeyframeTranslateY - movement in the Y direction that is made after TranslateX
  2. KeyframeTranslateX  - movement in the X direction that is made after KeyframeTranslateY 
  3. KeyframeTranslateY2  - movement in the Y direction that is made after KeyframeTranslateX 
  4. KeyframeTranslateX2  - movement in the X direction that is made after KeyframeTranslateY2 
  5. KeyframeTranslateY3  - movement in the Y direction that is made after KeyframeTranslateX2 

In future releases these will be substituted by a list with variable direction for more complex translations, with the TranslateX going into this list also;