--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/animation-tab' title: 'Animate elements on scroll, hover or click | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:38:34+00:00' updated: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Fade, slide or zoom elements in as visitors scroll, hover or click, with the Animation panel' tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Animate elements on scroll, hover or click' description: 'Fade, slide or zoom elements in as visitors scroll, hover or click, with the Animation panel' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:38:34+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/animation-tab' articleSection: 'Design guides' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/animation-tab' description: 'Fade, slide or zoom elements in as visitors scroll, hover or click, with the Animation panel' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Animate elements on scroll, hover or click. Fade, slide or zoom elements in as visitors scroll, hover or click, with the Animation panel Learn DXPR BuilderBuild pagesStyle your elementsDesign guides ## In this guide Related guides - [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Carousel layout](/hc/documentation/learn-dxpr-builder/layout/carousel-layout) You can make a section, a row or any content element move. Fade a heading up as it scrolls into view, let a button follow a moment later, or pulse an icon on hover. Each of them has an **Animation** panel in its settings. The example fades in a heading, then a registration button after a short delay. The video fades in a button and a heading as the section comes into view. ## Fade in a heading and a button 1. Click **Add Elements** in the empty content area and pick **Section** from the **Layout** tab. 2. Hover the section and open **More > Settings**. 3. Under **HTML classes**, pick **Align text center** and click **Save**. 4. Click **+** on the section and pick **Button** from the **Content** tab. Its settings open. 5. Type `Register now` in **Title** and `/register` in **Link**. 6. Open the **Animation** panel and set **Animation start** to **On appear**. 7. Set **Animation in** to **fadeInUp**. 8. Under **Hidden**, tick **Before in-animation**. 9. Set **In-delay** to 600 and click **Save**. 10. Click **+** on the section again and pick **Text** from the **Content** tab. It lands above the button. 11. Type a heading, such as `Open day 2026`, and set it to **Heading 2** in the editor toolbar. 12. Open the **Animation** panel. Choose **On appear**, **fadeInUp** and **Before in-animation**, as for the button. 13. Set **Duration** to 800 and click **Save**. 14. Click **Save** on the toolbar. 15. Open the view menu (the eye icon on the toolbar) and choose **Preview**. ## More effects to try - **Scroll reveal:** **On appear**, **fadeInUp**, **Before in-animation** and a **Duration** of 800. - **Staggered cards:** the same effect on three cards, with an **In-delay** of 0, 200 and 400. - **Attention pulse:** **On appear**, **pulse**, **Infinite** on and a **Duration** of 1500. - **Hover pulse:** **On hover**, **pulse** and a **Parent number** of 0, so only the element itself reacts. - **Tab reveal:** **On trigger** and **fadeIn** on the elements inside a tab. They play each time the tab opens. ## What you see When you save the text, the editor plays both effects: the heading fades up over 800 milliseconds and the button follows 600 milliseconds later. Visitors see the same as the section scrolls into view, once per page load. Both stay invisible until their effect starts, because **Before in-animation** is ticked. ## Settings | Setting | What it does | Default | |---|---|---| | **Animation start** | When the effect plays: **On appear** (scrolled into view), **On hover**, **On click** or **On trigger** (when the carousel slide, tab or toggle that holds the element opens) | **No animation** | | **Animation in** | The entrance effect: fades, slides, zooms, flips and attention effects such as bounce, pulse and shake | **No animation** | | **Animation out** | The exit effect, from the same list. Shows for **On hover** and **On trigger** only. | **No animation** | | **Hidden** | **Before in-animation** keeps the element invisible until its effect plays. **After in-animation** hides it once the effect ends. | Neither | | **Infinite** | Repeats the effect without end | Off | | **Appear boundary** | For **On appear**: how far below the screen the effect starts, in percent of the screen height. 0 starts it as the element scrolls into view; 100 starts it one screen height earlier. | 100 | | **Duration** | Length of the effect, 0 to 3000 milliseconds | 1000 | | **In-delay** | Wait before the entrance plays, up to 10000 milliseconds | 0 | | **Out-delay** | Wait before the exit plays, up to 10000 milliseconds | 0 | | **Parent number** | For **On hover** and **On click**: which element the visitor points at or clicks. 0 is the element itself, 1 its parent, 2 the parent's parent. | 1 | Columns have no **Animation** panel. Neither do the single tabs, toggles and slides inside layout elements. Animate the element inside them instead. ## If you don't see the animation - **The element never appears.** **Before in-animation** hides it until its effect plays, but **Animation in** is **No animation**. Pick an effect in **Animation in**. - **The effect played once and stopped.** **On appear** plays once per page load. Reload the page to see it again, or switch on **Infinite** for an effect that repeats. - **The effect starts before the visitor reaches the element.** **Appear boundary** is high: at 100, the effect starts one screen height before the element scrolls into view. Set it to 0 in the **Animation** panel. - **Hovering near the element starts the effect.** **Parent number** is 1, so the parent listens for the pointer. Set **Parent number** to 0. ## What's next? - [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects): change colours, shadows or opacity while the pointer rests on an element. - [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds): give the animated section a colour, a photo or a gradient. - [Carousel layout](/hc/documentation/learn-dxpr-builder/layout/carousel-layout): play **On trigger** effects each time a slide opens.