Lottie animations in Pageflow
A new content element brings lightweight web animations to Pageflow stories – for visual storytelling, interactive content, and engaging scrollytelling experiences.
What are Lotties?
Lotties are compact animations that are typically based on vector graphics. As a result, their lines, shapes and type remain pin-sharp even on large screens. At the same time, they often use considerably less data than comparable videos or animated GIFs.
Thanks to our new content element, these colourful eye-catchers can now be added to Pageflow with ease. This opens up fresh possibilities for digital storytelling: from subtle animated accents and interactive infographics to animations that unfold step by step as you scroll. This demo shows you what that can look like – and how to use Lottie animations in your own interactive content.
Three playback modes
1. Play once
The animation starts as soon as it becomes visible and runs once from start to finish. This is particularly suitable for short effects, transitions, or illustrations that build up step by step.
2. In infinite loop
In this mode, the animation repeats as long as it is visible. Ideal for small, continuous movements that add more liveliness to a page without distracting from the content.
3. Scroll position
Here, your audience controls the playback. As they scroll, the animation moves forwards frame by frame – and reverses when they scroll back. It is a particularly effective way to visualise processes, changes and connections.
Scroll-based control
With scroll-controlled Lotties, you can specify more precisely which part of the scroll movement drives the animation.
While visible The animation runs for the entire duration that the element is in the visible area.
While completely visible Playback starts when the element is fully visible and ends before it leaves the visible area again.
While crossing the viewport center The movement is oriented around how the element passes the middle of the screen.
While entering The animation plays while it is entering the visible area.
This allows you to adjust the effect according to the length and function of the animation: from a short entrance effect to a detailed, scroll-controlled explanation. Lottie animations thus become a versatile tool for scrollytelling, interactive reports, and other forms of visual storytelling.
The right stage for your animation
Lottie animations can be positioned in different ways depending on the alignment of a section: within the text flow, alongside the text, alongside as a sticky element, or stand-alone. In centred or middle-aligned sections, they can also be offset to float left or right to the text.
The alongside (sticky) and stand-alone options are particularly compelling for scroll-controlled animations. They give the movement room to breathe and connect it especially effectively with the reader's progress through the story.
Scroll Variants Sticky and Standalone
Alongside (Sticky)
In left- or right-aligned sections, the animation remains visible next to the text while readers scroll through the accompanying content. The movement can unfold one step at a time and respond directly to individual passages of text. This works particularly well for processes, explainers and illustrations in which new details appear in sequence.
Stand-alone
This position gives the animation a prominent stage of its own. As readers scroll, it locks into place within the visible area and remains fixed until it has played in full. It is then released and scrolls out of the viewport. This allows the audience to focus entirely on the animation and its sequence.
How are Lottie animations created?
There are various ways to create Lotties – from professional motion design to specialized browser based tools.
The easiest way to get started is with the Lottie Creator by LottieFiles. There you can animate shapes, texts, icons, and imported graphics, set keyframes, and export the result directly as a .lottie file. No installation is required.
On the platform, you will also find tutorials, templates, and assistance for getting started. The creator supports SVG imports, keyframe animations, and various export formats. Learn more about Lottie Creator.
From Figma to After Effects: other routes to a Lottie file
For more complex animations, traditional design and motion tools often come into play. Adobe After Effects can be used to create sophisticated motion sequences, transitions and vector animations, which can then be exported using tools such as Bodymovin or the LottieFiles plugin.
Figma can also form part of the workflow – for example, to prepare icons, illustrations or individual graphic elements before animating them in another tool. The best route to a finished Lottie file therefore depends on the project: it might begin with a quick browser-based tool or involve a full professional motion-design set-up.
Our experiment with ChatGPT - From illustration to finished animation
We wanted to find out whether ChatGPT could turn existing illustrations into ready-to-use Lottie files. The short answer is yes – and the results were surprisingly good.
We started with three images showing different stages of an illustration. The final state already existed; we then generated the two preceding stages to serve as references for the intended motion sequence.
We then described how the illustration should develop from one state to the next. After a few iterations and several rounds of refinement, ChatGPT produced a .lottie file that we could use directly in Pageflow. We were also able to create working Lottie animations with Claude in similar experiments.
The result may not be perfect in every detail, but it is certainly impressive for a relatively complex motif. Above all, our experiment shows that with a good source image, a clear idea and a little experimentation, you can create your own Lottie animations without extensive motion-design expertise.
Clean source files produce better results
The approach works especially well with clearly structured illustrations and movements that can be broken down into logical steps: fading in, moving, scaling, rotating or creating simple loops.
Ideally, you should use clean, well-structured SVG files in which the background, figures, arrows and other elements are clearly separated. However, our experiment also worked with PNG files on a transparent background.
Simple motifs should make it particularly easy to get started – for example, a progress bar growing from 0 to 100 per cent, a pulsing icon or a rotating graphic. More complex illustrations benefit from more precise instructions and a few additional rounds of refinement.
ChatGPT and Claude will not replace professional animation software in every scenario. They are, however, remarkably useful tools for developing initial animations, exploring variations and testing ideas directly in Pageflow.
The easiest route: use ready-made animations and customise them
Would you rather not animate from scratch? The LottieFiles Free Animations Gallery offers a wide range of animations that you can download, try out immediately or use as the starting point for your own design.
Customise them in Lottie Creator Many templates can be edited further in Lottie Creator. Colours, text, timing and individual movements can all be adapted to suit your own design. publishing, check that both the visual treatment and the licence are suitable for your intended use.
Customise them with ChatGPT ChatGPT can be particularly helpful for smaller changes. For example, an existing Lottie file can be modified using a set of specific instructions. In our experience, clear requests made one at a time produce the best results.
Replace the blue in this animation with the colour value #E83E66. At the end, make the text rotate through 360 degrees. Keep the rest of the motion sequence, the timing and all other colours unchanged.
Example
Prompt
Ready for more movement?
Would you like to get started without creating an animation of your own first? Our download pack contains a selection of Lottie examples that are ready to use. Simply download them, upload them to Pageflow and try out the different playback and positioning options.
Get Started
Whether it is a subtle eye-catcher, an animated chart or a scroll-controlled infographic, Lottie animations add a new layer of visual storytelling to your work. With Pageflow, you can turn them into multimedia stories, interactive features and compelling scrollytelling pages – without writing a line of code.