> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/how-to/use-webview-to-add-custom-animations-in-adalo.md).
# Use WebView to Add Custom Animations in Adalo
*Skill Level:* Intermediate
#### Before You Begin
* Ensure you have a [GitHub ↗](https://github.com/) account and are logged in.
* Have your animation code ready, or use an AI tool like [Claude ↗](https://claude.ai/) 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 ↗](https://github.com/), 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
* Learn Lottie animations on [LottieFiles](https://help.adalo.com/component-basics/marketplace-components/lottie-files?ask=What+are+the+three+basic+concepts+every+new+Adalo+user+should+know?)
* Learn more about hosting with [GitHub Pages ↗](https://pages.github.com/).
* Use AI tools like [Claude ↗](https://claude.ai/) or [ChatGPT ↗](https://chat.openai.com/) to generate, refine, or debug your animation code.
* Explore [GSAP ↗](https://gsap.com/) or [Anime.js ↗](https://animejs.com/) if you want more advanced, JavaScript-driven animations.
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 ↗](https://forum.adalo.com/). 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 ↗](https://info.adalo.com/submit-a-support-ticket) and our team will help you out.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.adalo.com/how-to/use-webview-to-add-custom-animations-in-adalo.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.