An interface animation is useful when it makes an action or change easier to understand. On a landing page, it can show what happens between an input, a selection and a result. The movement should answer a question that a still image explains less clearly.
For Skrapp.io, Brandegree created UI animations intended for website integration in JSON format. The demonstrations shown here come from that original project. The site has since changed, so these examples document the earlier work rather than its current interface.
Start with one specific action
A landing-page section needs a clear message before animation is considered. Ask which action would make that message visible. A click, a confirmed selection or information appearing can help explain a process.
The “Email Linkedin” demonstration depicts a profile-related lookup. In “Finder extension”, the sequence moves from selecting contacts to a search stage and a confirmation state. Successive states give the feature a concrete visual explanation.
Keep the sequence readable
A short animation can become confusing when everything moves at once. Establish an order: the element to notice, the action and the result. Secondary movements should remain quiet enough to preserve that progression.
The surrounding copy matters too. A heading, a sentence and a coherent sequence can form a complete explanation. If motion is being used to compensate for an unclear paragraph, clarify the paragraph first.
Choose the format after defining the job
Lottie renders animations from data, commonly exported as JSON, using a compatible player. It can suit animated shapes, paths and interface compositions. The format alone does not guarantee a small file or smooth playback.
Path complexity, embedded images, the player and the number of simultaneous animations affect the result. Video may suit a more complex scene. A still image or simple transition may be enough for a basic change. Decide by testing both the visual result and its behaviour within the actual page.
Another context: Nindohost
Brandegree also created animations for Nindohost’s site builder landing page. The context differs, while the design question remains specific: which idea needs to become visible in this section?
A useful adaptation does not repeat the same animation across unrelated products. It carries over a way of structuring the explanation: isolate the message, define the sequence and maintain a clear relationship with the copy.
A perspective from Othmane Ghazi
Othmane Ghazi, founder and CEO of Skrapp.io, shared a video testimonial about the collaboration. It appears beside the demonstrations to connect the work with the client’s perspective.
The testimonial offers a view of the engagement. The visual examples let readers examine the animation decisions.
Integrate the movement thoughtfully
Reserve the visual’s dimensions during loading, avoid starting every animation on the page and check the experience on mobile. Provide a useful still state and respect the reader’s reduced-motion preference.
If automatic movement continues alongside the text, give the reader a way to pause it. An animation can draw attention at the right moment without repeating throughout the reading experience.
At Brandegree, this work connects art direction, sequencing and the context of integration. If a feature can be understood with an image, keep that simplicity. If several stages need to connect, a focused animation may help. For a fuller story, an explainer video provides room for a longer progression.
