Add Lottie animation to your Weebly site

A Lottie animation brings controlled movement to a website without the weight of a traditional video. The animation scales cleanly, can loop automatically and may respond to interactions, making it useful for hero graphics, loading indicators, product demonstrations and decorative sections. Most visitors never need to know they are viewing vector artwork rather than a GIF or MP4.

The easiest Weebly implementation usually involves a hosted player and an Embed Code element. A custom HTML solution gives you greater control over sizing, loading and playback, but it requires a little more testing. Choose an approach based on the number of animations, your available Weebly plan and how important the animation is to the page experience.

Choose the right Lottie format

Lottie files are commonly exported from Adobe After Effects using the Bodymovin extension. They can also be created or edited with online Lottie tools. The most widely supported format for websites is a .json file containing vector shapes, keyframes, colours and animation timing. A .lottie file bundles the animation and its assets into a compressed archive, but it requires a compatible DotLottie player.

For a Weebly site, a standard JSON animation with lottie-web is usually the safest starting point. Before uploading it, remove unused layers, shorten the timeline and delete hidden artwork. If the design contains raster images, export those separately where possible because they can make the final file much larger. A short, carefully trimmed animation often performs better than a complex one with several seconds of unnecessary footage.

You also need a reliable source for the file. A direct URL should end in .json, return the file rather than an HTML page and allow cross-origin requests. A suitable static host or your own website domain gives you more control. Before choosing a service, check its commercial terms, uptime and privacy policy rather than assuming every animation library is suitable for client or business work.

Plan where the animation belongs

Start by deciding what the movement should accomplish. A gentle background loop can soften a hero section, while an animated diagram can explain a process. Put important information in normal HTML beside it so visitors can still understand the message if the file fails to load. Keep critical buttons, prices and contact details as real Weebly text and links rather than baking them into the artwork.

Animation dimensions should follow the design rather than force the animation into an awkward shape. A wide hero graphic may need to sit above a heading on mobile, while a square animation can fit inside a column. Use the mobile preview after arranging the section because Weebly column stacking can crop or compress embedded content.

A pre-launch website is another useful application. The same motion can introduce a brand while visitors wait for the main site to open, and this guide to building a coming soon page explains how to structure that temporary experience. Add a working email signup, expected opening information and a fallback image so the page remains useful even when visitors have slow connections.

Embed the player in your Weebly page

The simplest route is to use the embed option supplied by your animation host. Copy its iframe code, open the relevant Weebly page and drag an Embed Code element into the desired section. Paste the iframe into the element, save the page and preview the published version. This approach keeps most of the technical work with the provider, although you may have less control over loading behaviour.

For more control, use lottie-web with a JSON file. Add the player script and a container to an Embed Code or custom HTML section, then configure the animation with JavaScript. Replace the example asset URL with your own direct JSON link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

<div class="lottie-holder">
  <div
    id="weebly-lottie"
    role="img"
    aria-label="Animated plant growing in a circle">
  </div>
</div>

<script>
  const weeblyLottie = lottie.loadAnimation({
    container: document.getElementById("weebly-lottie"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://assets.example.com/weebly-lottie.json"
  });
</script>

Give every container and variable a unique name if you plan to use several animations on one page. You can add CSS for the holder through your theme stylesheet, setting a maximum width and sensible spacing so the animation responds to smaller screens. If you use the same player in several sections, load the script once in the header code area rather than repeating it. Weebly controls and plan options vary, so check the available customisation areas in your editor and confirm that scripts run on the published page.

Control playback and page behaviour

Autoplay works well for a small decorative loop, but constant movement can distract from reading or buying. Set autoplay to false when the animation is an important interaction, then trigger it with a button or link. Always provide visible HTML instructions when visitor input is required, since the shapes and text inside a Lottie file are not dependable keyboard controls.

Respect the visitor’s motion preferences. When the operating system reports reduced motion, show the first frame or a static image instead of starting the loop. You can test this with window.matchMedia('(prefers-reduced-motion: reduce)') and pass the result into the animation settings. For decorative artwork, use aria-hidden="true"; for meaningful animation, retain a short accessible label and explain the information in nearby text.

Long pages also benefit from pausing animations that are no longer visible. An IntersectionObserver can call the player’s pause and play methods as the container enters or leaves the viewport. This saves processing time on pages containing several loops and helps on phones, where battery use and background activity are noticeable concerns.

Keep the page fast and secure

File size is one of the biggest influences on performance. Export at the size the animation will actually display, trim the timeline and remove expressions or effects that do not contribute to the final motion. Compare the JSON file with the original design rather than judging it only by its appearance in an editor. A lightweight vector loop can outperform a poorly compressed GIF, while a detailed composition may need compression or fewer keyframes.

The player script is third-party code, so use a reputable source and pin a tested version instead of loading an unpinned “latest” release. Before adding it to a business website, secure the Weebly editor account and use a unique password stored in a password manager. This explanation of iPhone Keychain passwords offers a practical approach for iPhone users who want those credentials available without reusing the same password across services.

An externally hosted animation may also send visitor IP addresses and other technical data to another country. If your organisation is covered by the Privacy Act 1988 and the Australian Privacy Principles, review what the host collects and whether it qualifies as a third party or service provider. Publish an appropriate privacy notice, restrict unnecessary tracking and consider self-hosting both the player and JSON file where practical. A lightweight fallback image gives you another layer of protection against a broken animation.

Test for Australian visitors and real devices

Test on the devices and connections your Australian audience actually uses. Check recent iPhones, popular Samsung and other Android phones, tablets and desktop browsers rather than relying only on the Weebly editor preview. Metro users around Sydney, Melbourne, Brisbane and Adelaide may have fast fibre, while visitors in regional Australia or places such as Perth, Canberra and Darwin may experience different latency and connection stability. Compress the file, avoid unnecessary preloading and confirm that the layout remains readable when the animation is slow to arrive.

Australian English and business conventions deserve a quick review too. Use “customise”, “colour” and “favourites” where appropriate, display prices in Australian dollars and format dates as day, month and year. Friendly expressions such as “no worries” or “this arvo” can suit a relaxed brand voice, but they should not replace clear instructions in a booking form, checkout or service announcement.

Time zones can affect a launch schedule because Sydney and Melbourne observe daylight saving while Brisbane does not, and Perth normally sits two or three hours behind the eastern states. Check the local time in each target market before publishing a timed announcement. The animation can then reinforce the moment without causing visitors to arrive early or miss the intended opening.

Promotional content needs equal care, especially when animation makes an offer appear more urgent than it is. Australian pokies advertising and website rules vary between states and territories, and South Australia has no licensed pokies clubs even though online promotions exist. A deposit bonus pokies page, for example, needs accurate eligibility, wagering and responsible-gambling information rather than a vague animated banner. Review every linked destination and its disclosures instead of treating motion as a substitute for clarity.

Your final preview should include the published desktop and mobile pages, keyboard navigation, reduced-motion behaviour, a throttled connection and a temporary server error. Check that the surrounding copy remains useful if JavaScript is blocked, and that the animation container has no stray horizontal scroll. Publish only after those checks are complete.

Choose one meaningful animation, obtain a properly sized JSON file and add it through the method that matches your technical comfort. Then preview the page on an Australian mobile connection, publish it and place a clear action beside the motion so visitors know exactly what to do next.