The Animation Editor is on the Editor tab of the AnimateGL page. It designs the site default animation: the one that blocks set to Site default use, and elements with only the agl class.
Design an animation
- Open the AnimateGL page and click the Editor tab.
- Pick a Type (WebGL or CSS) and a Preset to start from.
- Change the settings. The sample image next to the controls shows the result.
- Click Replay to play it again.
- Click Save as default.
To start from an animation in the gallery, click Customize on it in the Animations tab.
Settings
- Fade: the fade type, including directional fades, and its threshold.
- Translate: movement along the x, y and z axes.
- Rotate: rotation around the x, y and z axes.
- Scale and Clip Path, for CSS animations.
- Corners Bend: the start and end position of each corner, for WebGL animations.
- Duration, Delay and Easing.
- Progress: drag it to see any moment of the animation.
The settings you see depend on the type.
Restore the original
Click Restore the original default to go back to the animation AnimateGL started with.
Save more than one animation
The free plugin saves one animation, the site default. AnimateGL Pro can save the editor’s settings as named animations that you pick like any preset. See My animations.