Using the AdvancedTween Editor in full-screen mode is recommended.

About the AdvancedTween Editor and AdvancedTween Extension

The AdvancedTween Editor and the AdvancedTween extension provide animation creation tools and playback functionality for GDevelop.

Please note that these tools are not intended for creating image-changing animations.
In other words, they are not intended as a replacement for Spine.

🚀 Possible Future Features

• Support for multiple objects (editor only)
• Event keyframes
• Color tinting
• Retrieving animation names (behavior only)

📝 AdvancedTween Editor

The AdvancedTween Editor is a browser-based timeline animation editor that supports creating and editing animations.
You can animate the following object properties:

Continuous Properties

Values change smoothly between keyframes.
The speed and feel of the transition vary depending on the selected easing type.

• Position (relative)
• Z-index (relative)
• Angle (relative)
• Size (relative)
• Opacity (supported objects only)

Properties marked as “relative” are treated as relative values based on the property values at the moment playback starts.

Discrete Properties

Regardless of the easing setting, these properties are always handled using step interpolation.

• Visibility (show / hide)
• Flipping (supported objects only)
• Animation name (sprites only)

About Easing

• "linear" — Changes at a constant speed
• "cubicBezier" — Changes with acceleration and deceleration using a cubic Bézier curve
• "step" — Holds the value until the next keyframe, then switches instantly

For "cubicBezier", you can either choose from presets or directly edit the Bézier curve within the editor.

🧩 AdvancedTween Extension

The AdvancedTween extension provides behaviors that allow animations created in the AdvancedTween Editor to be played in GDevelop.

By adding the AdvancedTween behavior to a 2D object and loading a JSON file created with the editor, the animation will be played.

Notes on Sprite Object Points

It is recommended that the sprite’s origin point and center point are placed at the same position.
If the origin and center differ, the animation may produce unexpected results.

About Relative Object Properties

Some properties are handled as relative values based on their values at the moment playback starts.
For example, if you switch to another animation after an animation that changes the object’s size, the modified size will be retained.

If you want to avoid this behavior, make sure to set the property to the desired value before switching to the next animation.

📁 About the example project file

[ Preview the example ]

The example project file contains the following scenes:

• Basic example
• Controlling animation
• Platformer example

🍩 Donation

If you like this extension, please consider purchasing the sample project files to support my ongoing development and maintenance. (The sample project files will definitely be useful for you 😉)

If you’re interested in members-only early access, please check here.