Animation

23 Sep 20253 minutes to read

The Animation framework provide options to animate the html DOM elements

  let animeObject = new Animation({
     name: 'SlideLeftIn',
     duration: 1000
  });
  animeObject.animate('#anime1');
  animeObject.animate('#anime2', { duration: 500 });

Properties

delay number

Specify the delay to start animation

Defaults to : 0;

duration number

Specify the duration to animate

Defaults to : 400;

name Effect

Specify the type of animation

Defaults to : ‘FadeIn’;

timingFunction string

Specify the animation timing function

Defaults to : ‘ease’;

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event
handler	Function	Specifies the call to run when the event occurs.

Returns void

animate

Applies animation to the current element.

Parameter	Type	Description
element	string | HTMLElement	Element which needs to be animated.
options (optional)	AnimationModel	Overriding default animation settings.

Returns void

dataBind

Bind property changes immediately to components

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event to remove
handler	Function	Specifies the function to remove

Returns void

stop

Stop the animation effect on animated element.

Parameter	Type	Description
element	HTMLElement	Element which needs to be stop the animation.
model (optional)	AnimationOptions	Handling the animation model at stop function.

Returns void

Events

begin EmitType<AnimationOptions>

Triggers when the animation is started

end EmitType<AnimationOptions>

Triggers when animation is completed

fail EmitType<AnimationOptions>

Triggers when animation is failed due to any scripts

progress EmitType<AnimationOptions>

Triggers when animation is in-progress