Index


Applying Animations Across Multiple Frames


When you apply preset or custom animation, like Pan or Transform, to an element in Flexitive, the animation will begin and end within a single animation frame.


To apply an animation to an element across multiple frames, you can use a Global Asset.



What is a Global Asset?


A Global Asset is a Flexitive design that can be embedded in any other Flexitive design. The design you use as a global asset can be anything from a single element to a fully responsive design. Use Global Assets to reuse a brand asset across multiple designs or create an animated component that behaves independently from the main design's animation sequence.


Settings you apply to a Global Asset, such as the animation settings on the element, will be visible in the design that the Global Asset is embedded in. We are going to leverage this to animate an element across multiple animation frames.


Learn more: Using a Flexitive Design as an Asset


Building a Global Asset


A Global Asset is created just like any other Flexitive design - it has its own canvas, activated sizes, and settings. When building your Global Asset, you'll need to activate the sizes it will appear at in the designs it will be embedded into.


To find out which sizes to activate, check the size of the element in your main design using the Size and Position panel under Element Size. For example, if the element in your main design is 120x80, make sure to activate the 120x80 size.


If the matching size isn’t activated in the Global Asset, Flexitive will do its best to adapt the layout when the asset is embedded. For complete control over how your Global Asset appears, activate the exact size or aspect ratio used in your main design. This helps prevent elements from being cut off or positioned differently than expected.



Adding an Animation to a Global Asset


You can add animations to a Global Asset the same way you would with any other element in Flexitive.


A Global Asset has its own independent animation timeline, allowing you to build animations that aren’t restricted to a single frame. This is especially useful for elements that need to animate across the full duration of your design. For example, if the timeline of your design is 10 seconds and you want an element to pan across the screen for the full duration, you can build that animation within a Global Asset.


Learn how to add an animation to an element.


Setting the Animation Duration for a Global Asset


To ensure the animation syncs across frames in your design, set the animation duration of the Global Asset to match the timing in the design. For example, if your design has two frames, each lasting 3 seconds, and you want the animation to play continuously across both frames, set the animation duration of the Global Asset to 6 seconds.


Embed a Global Asset into your Design



Once you’ve finished setting up the Global Asset and activated all necessary sizes:


1. Publish and exit the design

2. Copy the Design ID of the Global Asset

3. Open the design you want to embed the Global Asset into

4. In the Assets panel on the right-hand side, select the Global Assets tab

5. Under the Flexitive Design ID tab, paste the copied ID into the Paste Design ID Here field

6. Click the arrow button to upload the Global Asset

7. Once added, drag and drop the element onto the canvas.