GIF
The GIF object allows you to place animated image files directly onto your Custom Launcher canvas. While standard images are great for static backgrounds or headers, GIFs bring your interface to life with looping animations, spinning logos, or atmospheric effects.
Because they render seamlessly within the design environment, they are an incredibly lightweight way to add motion to your Custom Game Launcher without needing heavy video files or complex code.
GIF Overview
A GIF acts as a visual container that perfectly fits your chosen animated file. The animation will scale to the exact width and height you specify, giving you total control over how the motion fits into your layout.
Typical Uses
- ❖ Displaying a spinning clan or server logo
- ❖ Adding atmospheric effects like falling snow or embers
- ❖ Creating custom animated loading spinners
- ❖ Showcasing brief gameplay clips or character idles
Default Settings
When dropped onto your page, the GIF object applies a basic default layout to ensure your animation scales properly.
| Property | Default Value |
|---|---|
| Dimensions | Width: 100, Height: 100 |
| Playback | Loop GIF: Enabled |
| Visibility | Hide at Start: False |
Properties
The visual editor allows you to configure what animation plays and how it behaves.
Source
- GIF URL: Provide a direct URL to a hosted `.gif` file, or browse your Asset Library to pick one you have uploaded to the system.
Playback
- Loop GIF: Check this box if you want the animation to repeat continuously. If unchecked, the animation will play its frames once and stop on the final frame.
GIF Events
GIF objects are purely visual display elements. Because they act as moving images rather than interactive interface elements, they do not possess innate click or hover events of their own. If you need a clickable animated image, consider using an Image Button object instead.
All Possible Actions for the GIF Object
You can dynamically manipulate a GIF object during runtime using several standard visual actions.
| Action | How it works |
|---|---|
| Show Objects | Makes the GIF visible on the screen. Great for displaying a loading spinner only when needed. |
| Hide Objects | Removes the GIF from view immediately. |
| Move Object | Translates the GIF to a new set of X and Y coordinates on the canvas. |
| Resize Object | Changes the width and height of the GIF dynamically. |
Building Logic with the GIF Object
You can seamlessly integrate GIF animations into the flow of your launcher to give users visual feedback.
Example: Creating a Working Loading Spinner
Use a GIF to show the user that a process is happening in the background.
- Add a GIF object to your page containing a loading spinner animation.
- In its properties, check the box for Hide at Start so it is initially invisible.
- On your "Play" Button's onClick event, add the Show Objects action and select your GIF.
- Follow this immediately with your Launch Local File or Download File action to start the background process.
- When the process finishes, use the Hide Objects action to remove the spinner again.
Custom CSS Example
Because the GIF object is highly versatile, users with the Developer Edition can apply Custom CSS directly to the container holding the animation. Using @keyframes, we can make any GIF smoothly float up and down across the interface.
When applying Custom CSS in the Developer Edition, ensure you use !important to successfully override the default properties. You do not need to scope the object manually. Do not override structural geometry properties like width, height, top, or left.
This live preview demonstrates how you can map a @keyframes animation directly to the GIF object, causing it to gently hover. This is perfect for floating mascots, hovering items, or ghostly atmospheric objects.
/* Developer Edition Custom CSS Example for GIF Object */
/* No manual object scoping needed */
will-change: transform !important;
animation: glcFxFloat 5.5s ease-in-out infinite !important;
@keyframes glcFxFloat {
0% { transform: translateY(0px); }
25% { transform: translateY(-18px); }
50% { transform: translateY(0px); }
75% { transform: translateY(18px); }
100% { transform: translateY(0px); }
}
Summary
The GIF object is an excellent, low-overhead way to introduce motion and visual feedback into your Custom Game Launcher. By utilizing its looping capabilities, visibility actions, and powerful CSS animations, you can keep your interface feeling dynamic, responsive, and polished without writing complex code from scratch.