Simple and powerful animation plugin.


Based on:
https://animejs.com/


Sample App:
https://visualneo.com/tutorials/neoani


Description:

The neoAni plugin for VisualNEO Web is a versatile animation tool based on the Anime.js library, allowing developers to create intricate animations on web page elements. Here’s an overview of its primary features:

    • Animation of Object Properties:
      • With neoAniAddProperty, developers can animate object properties such as position, opacity, and color. This feature allows both simple animations and complex transitions on any HTML or CSS property, enhancing the visual appeal of elements within an app.
    • Keyframe and Staggered Animations:
      • The plugin supports both simple keyframes (neoAniAddSimpleKeyFrame) and detailed keyframes (neoAniAddKeyFrame), enabling control over various stages of an animation. Additionally, neoAniAddStaggering allows time-offset animations for multiple elements, creating a cascading or staggered effect.
    • Control Commands:
      • neoAni provides commands to manage animation playback, including neoAniPlay, neoAniPause, neoAniRestart, and neoAniReverse, which control the flow and direction of animations, ideal for interactive or user-controlled sequences.
      • Developers can also use neoAniSeek to go to a specific point in an animation, offering precise control over playback timing.
    • Event Triggers and Paths:
      • Custom events can be added using neoAniAddEvent to trigger specific actions at certain points during an animation. Furthermore, with neoAniAddPath, animations can follow an SVG-defined path, making it suitable for animating objects along curved or custom trajectories.
    • Text Wrapping and Letter Animation:
      • The neoAniWrapText command allows individual letter animations within text objects, useful for creating dynamic text effects like those found in title sequences or for emphasis within user interfaces.


The neoAni plugin empowers developers to enrich web applications with smooth, professional animations, making it ideal for interactive, visually appealing content in presentations, games, or creative web designs​​​. 


neoAniAddProperty

Purpose:

Add a new animation property. Use before neoAniStart

Category:

neoAni

Syntax:

neoAniAddProperty "thename" property "thevalue"

 

thename

Anmation name

property

Property to animate (or any numeric CSS property)

thevalue

Final value (use += to increase or -= to decrease actual value)

 

neoAniAddSimpleKeyFrame

Purpose:

Add a new simple keyframe to the animation. Use instead of neoAniAddKeyFrame.
Use before neoAniStart

Category:

neoAni

Syntax:

neoAniAddSimpleKeyFrame "thename" property "thevalue"

 

thename

Animation name

property

Property to animate (or any numeric CSS property)

thevalue

Final value (use += to increase actual value)

 

neoAniAddKeyFrame

Purpose:

Add a new property keyframe. Use as many times as you need for each property. Superseeds neoAniStart options. Use before neoAniStart

Category:

neoAni

Syntax:

neoAniAddKeyFrame "thename" property "thevalue" thedelay theduration easing kind

 

thename

Anmation name

property

Property to animate (or any numeric CSS property)

thevalue

Final value (use += to increase actual value)

thedelay

Delay (seconds)

theduration

Duration (seconds)

easing

Motion easing

kind

Kind (left empty for linear)

 

neoAniAddStaggering

Purpose:

Staggering allows to animate multiple objects applying a time difference to the starting point.
Use before neoAniStart

Category:

neoAni

Syntax:

neoAniAddStaggering "thename" thedelay thestagger firstitem

 

thename

Animation name

thedelay

Initial delay in seconds

thestagger

Time interval between animation starting points (seconds)

firstitem

Start from (choose option or write index number)

 

neoAniAddEvent

Purpose:

Add an event to the animation. Use before neoAniStart

Category:

neoAni

Syntax:

neoAniAddEvent "thename" theevent thesub

 

thename

Animation name

theevent

Event

thesub

Subroutine to execute

 

neoAniAddPath

Category:

neoAni

Syntax:

neoAniAddPath "thename" "objId" theangle

 

thename

Animation name

objId

SVG Icon or SVG path

theangle

Include angle?

 

neoAniStart

Purpose:

Animates an object from the current properties to the added ones.
Use neoAniAddProperty first.

Category:

neoAni

Syntax:

neoAniStart "thename" "objectId" time delay enddelay easing kind direction loop autoplay

 

thename

Animation name

objectId

Select an object to animate (or CSS selector)

time

Animation duration in seconds

delay

Time to wait before animation starts (seconds)

enddelay

Extra time at the end of the animation (seconds)

easing

Motion easing

kind

Animation kind (left empty for linear)

direction

Direction

loop

Loop

autoplay

Autoplay

 

neoAniPause

Purpose:

Pause animation.

Category:

neoAni

Syntax:

neoAniPause "thename"

 

thename

Animation name

 

neoAniPlay

Purpose:

Play animation after a pause

Category:

neoAni

Syntax:

neoAniPlay "thename"

 

thename

Animation name

 

neoAniRestart

Purpose:

Restart animation

Category:

neoAni

Syntax:

neoAniRestart "thename"

 

thename

Animation name

 

neoAniReverse

Purpose:

Reverse animation

Category:

neoAni

Syntax:

neoAniReverse "thename"

 

thename

Animation name

 

neoAniSeek

Purpose:

Go to a specific animation point

Category:

neoAni

Syntax:

neoAniSeek "thename" thetime

 

thename

Animation name

thetime

Time in seconds

 

neoAniRemove

Purpose:

Pause and remove the animation object

Category:

neoAni

Syntax:

neoAniRemove "thename"

 

thename

Animation name

 

neoAniWrapText

Purpose:

Wrap every letter in a text with a T to animate them later.

Category:

neoAni

Syntax:

neoAniWrapText "objId"

 

objId

Select an object with text

Created with the Personal Edition of HelpNDoc: How to Protect Your PDFs with Encryption and Passwords