Enhance your Stories with custom animations created using professional video and animation software. ScreenSpace plays well with tools like After Effects, allowing you to incorporate high-quality, dynamic animations into your content.
Custom animations can be used to create smooth transitions, engaging title sequences, captivating logo or chart animations, and more, helping you evoke emotions and capture your audience’s attention.
There are two primary ways to bring your custom animations into ScreenSpace:
Video Renders
You can easily render videos from third-party software and upload them into ScreenSpace. This includes looping videos, titles, and transitional elements.
Tips for Using Video Animations:
Extend Video Backgrounds: For solid color backgrounds, match the color of the ScreenSpace background to the color of your uploaded video. This creates the illusion that the video animation extends to the end of the frame, providing a seamless visual experience. Works best when using a Media Scene with Shadows and Reflections turned off under Device Options.
Timed Animations: Use Timing Actions to delay interactive objects to sync with a video animation or reveal after a transition.
Scene Timer: Use the Scene Timer to automatically transition to a new scene or open a StoryPoint just as the video ends.
Steps to Upload Video Renders
Create and Render Your Animation: Use your preferred software (e.g., After Effects) to create your animation. Export the animation as a video file. We recommend MP4 to avoid long upload times.
Upload to ScreenSpace: Go to the Content Library in ScreenSpace and
upload your rendered video.Integrate into Your Story: Add the video to your Story, using it as a looping element or a transitional piece to enhance your narrative.
Lottie Animations (Advanced)
For more advanced animations, you can generate Lottie files from After Effects using the Bodymovin plugin or other Lottie tools like LottieFiles. Lottie animations are lightweight, scalable, and perfect for adding interactive elements to your Stories.
Benefits and Examples:
Interactive Elements: Create engaging, interactive animations that respond to user interactions.
Scalable Graphics: Lottie animations are vector-based, ensuring they look sharp on all screen sizes.
Enhanced Storytelling: Use animations to highlight key points, create visual interest, and guide your audience through your Story.
Steps to Create Lottie Animations in After Effects:
Create Your Animation: Design your animation in After Effects.
Use the Bodymovin Plugin: Install the Bodymovin plugin for After Effects. You can find the plugin and installation instructions here.
Optimize Your Animation: Ensure your animation uses vector layers and is optimized for web use. Avoid using effects or features not supported by Lottie.
Export as Lottie: Use the Bodymovin plugin to export your animation as a Lottie JSON file.
Upload to ScreenSpace: Go to the Content Library in ScreenSpace and
upload your Lottie file.Integrate into Your Story: Add the Lottie animation to your Story, leveraging its interactive and scalable features to enhance your content.
Things to Look Out For:
Complexity: Simplify your animations to ensure they perform well and load quickly.
Compatibility: Use the Bodymovin plugin to check compatibility and preview your animations.
Performance: Although Lottie files are small, complex, heavy animations may lag on some device
By incorporating custom animations, whether through video renders or advanced Lottie files, you can create more engaging and visually appealing Stories on ScreenSpace. Utilize these powerful tools to bring your creative vision to life, making your content more dynamic and memorable.
🪄 Need assistance generating custom animations?