Ctrlk
Sign Up for Adalo
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Use WebView to Add Custom Animations in Adalo

Display custom HTML animations in your Adalo app using WebView and GitHub Pages without impacting app performance.

Skill Level: Intermediate

Before You Begin

  • Ensure you have a GitHub β†— account and are logged in.

  • Have your animation code ready, or use an AI tool like Claude β†— to generate HTML/CSS/JS.

  • You do not need a paid Adalo plan to implement this feature.

Walkthrough

  1. Open your Adalo app and create a new blank screen. Name it something descriptive like Splash Animation.

  2. Click the + icon in the top left of the builder. In the search bar, type WebView, then drag the WebView component onto your screen.

  3. With the WebView selected, use the right-hand panel to adjust Width, Height, X Position, and Y Position. For a full-screen animation, match the screen's dimensions.

  1. In a new browser tab, go to GitHub β†—, click the + icon in the top right, and select New repository. Name it, set visibility to Public, check Add a README file, and click Create repository.

  1. Open Claude (or your preferred AI tool) and ask it to generate animation code. For example: "Create a full-screen HTML page with a smooth animated gradient background and a centered welcome message." Refine the output by asking for adjustments until you're satisfied.

  2. Back in your GitHub repository, click Add file > Create new file. Name the file index.html, paste your full animation code (HTML, CSS, and JavaScript) into the editor, then scroll down and click Commit changes to save.

  3. Click the Settings tab at the top of the repository, scroll down and click Pages in the left sidebar. Under Build and deployment > Branch, select main, then click Save.

  1. Wait about 1 minute, then refresh the Pages settings. You'll see a green banner: "Your site is live at..." followed by your URL. Click the URL to open it in a new tab and confirm the animation loads, then copy it from your browser's address bar, or click the small copy icon next to the URL in the banner itself.

  2. Return to your Adalo app and click the WebView component on your screen. In the right-hand panel, paste your GitHub Pages URL into the URL field.

(Optional)

  • Add a Countdown Timer component to your screen and set the duration to match your animation length (e.g., 5–10 seconds).

  • Click the Countdown Timer, then under When countdown ends, add a Link action. Set the condition to Logged-in User > Email > Is set and link to your Home screen.

  • Add a second Link action with the opposite condition (Logged-in User > Email > Is not set) and link to your Sign Up screen.

  • Test the full flow by previewing your app and tapping Get Started. Your animation should play and then redirect appropriately.

Learn More

Since your animation runs as a standard web page, any JavaScript animation library (GSAP, Anime.js, Three.js, Lottie Web Player) will work inside the WebView. Just include the library via CDN in your index.html. For best performance on mobile, prefer CSS animations over heavy JS-driven ones.

Known Limitations and Gotchas

  • The WebView cannot send data back to Adalo. Use a Countdown Timer in Adalo to trigger actions after the animation, since taps inside the WebView won't work.

  • GitHub Pages caches aggressively. After updating index.html, allow a few minutes for changes to appear, or append ?v=2 to your URL to force a refresh.

  • Your GitHub repository must be Public on free plans β€” don't include any sensitive code or keys.

Help

If you need additional help with this article, you can always ask in our community forum β†—. Be sure to paste the link to this article in your post as well!

If you're still stuck, you can also submit a support ticket β†— and our team will help you out.

PreviousHow to Add a Guest User FlowNextAdalo Account

Last updated

Was this helpful?