--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/animation-tab' title: 'Elemente bei Scroll, Hover oder Klick animieren | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:01:38+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Sie können einen Abschnitt, eine Zeile oder jedes Inhaltselement bewegen. Blenden Sie eine Überschrift beim Scrollen ins Bild von unten ein, lassen Sie eine Schaltfläche einen Moment später folgen, oder lassen Sie ein Icon bei Hover pulsieren. Jedes hat ein Panel Animation in seinen Einstellungen. Das Beispiel blendet eine Überschrift ein, dann eine Anmeldeschaltfläche nach kurzer Verzögerung. Das Video blendet eine Schaltfläche und eine Überschrift ein, während der Abschnitt ins Bild kommt. 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-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Elemente bei Scroll, Hover oder Klick animieren' description: |- Sie können einen Abschnitt, eine Zeile oder jedes Inhaltselement bewegen. Blenden Sie eine Überschrift beim Scrollen ins Bild von unten ein, lassen Sie eine Schaltfläche einen Moment später folgen, oder lassen Sie ein Icon bei Hover pulsieren. Jedes hat ein Panel Animation in seinen Einstellungen. Das Beispiel blendet eine Überschrift ein, dann eine Anmeldeschaltfläche nach kurzer Verzögerung. Das Video blendet eine Schaltfläche und eine Überschrift ein, während der Abschnitt ins Bild kommt. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:01:38+0000' dateModified: '2026-10-24T17:19:22+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/de/hc/dokumentation/dxpr-builder-lernen/design/animation-tab' articleSection: Design-Leitfäden - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/animation-tab' description: |- Sie können einen Abschnitt, eine Zeile oder jedes Inhaltselement bewegen. Blenden Sie eine Überschrift beim Scrollen ins Bild von unten ein, lassen Sie eine Schaltfläche einen Moment später folgen, oder lassen Sie ein Icon bei Hover pulsieren. Jedes hat ein Panel Animation in seinen Einstellungen. Das Beispiel blendet eine Überschrift ein, dann eine Anmeldeschaltfläche nach kurzer Verzögerung. Das Video blendet eine Schaltfläche und eine Überschrift ein, während der Abschnitt ins Bild kommt. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) /[Design-Leitfäden](/de/hc/documentation/learn-dxpr-builder/design/overview) # Elemente bei Scroll, Hover oder Klick animieren. DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden ## In diesem Leitfaden Verwandte Leitfäden - [Elemente bei Hover reagieren lassen](/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte) - [Abschnitt mit Farbe, Foto oder Verlauf füllen](/de/hc/dokumentation/dxpr-builder-lernen/design/hintergruende) - [Ein Karussell-Layout hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/karussell-layout) Sie können einen Abschnitt, eine Zeile oder jedes Inhaltselement bewegen. Blenden Sie eine Überschrift beim Scrollen ins Bild von unten ein, lassen Sie eine Schaltfläche einen Moment später folgen, oder lassen Sie ein Icon bei Hover pulsieren. Jedes hat ein Panel **Animation** in seinen Einstellungen. Das Beispiel blendet eine Überschrift ein, dann eine Anmeldeschaltfläche nach kurzer Verzögerung. Das Video blendet eine Schaltfläche und eine Überschrift ein, während der Abschnitt ins Bild kommt. ## Überschrift und Schaltfläche einblenden 1. Klicken Sie im leeren Inhaltsbereich auf **Add Elements** und wählen Sie **Section** im Tab **Layout**. 2. Zeigen Sie auf den Abschnitt und öffnen Sie **More > Settings**. 3. Wählen Sie unter **HTML classes** die Option **Align text center** und klicken Sie auf **Save**. 4. Klicken Sie auf **+** am Abschnitt und wählen Sie **Button** im Tab **Content**. Seine Einstellungen öffnen sich. 5. Tippen Sie `Register now` in **Title** und `/register` in **Link**. 6. Öffnen Sie das Panel **Animation** und setzen Sie **Animation start** auf **On appear**. 7. Setzen Sie **Animation in** auf **fadeInUp**. 8. Aktivieren Sie unter **Hidden** die Option **Before in-animation**. 9. Setzen Sie **In-delay** auf 600 und klicken Sie auf **Save**. 10. Klicken Sie erneut auf **+** am Abschnitt und wählen Sie **Text** im Tab **Content**. Es landet über der Schaltfläche. 11. Tippen Sie eine Überschrift, etwa `Open day 2026`, und setzen Sie sie in der Editor-Symbolleiste auf **Heading 2**. 12. Öffnen Sie das Panel **Animation**. Wählen Sie **On appear**, **fadeInUp** und **Before in-animation**, wie bei der Schaltfläche. 13. Setzen Sie **Duration** auf 800 und klicken Sie auf **Save**. 14. Klicken Sie in der Symbolleiste auf **Save**. 15. Öffnen Sie das Ansichtsmenü (das Augensymbol in der Symbolleiste) und wählen Sie **Preview**. ## Weitere Effekte zum Ausprobieren - **Scroll-Einblendung:** **On appear**, **fadeInUp**, **Before in-animation** und eine **Duration** von 800. - **Gestaffelte Karten:** derselbe Effekt auf drei Karten, mit **In-delay** von 0, 200 und 400. - **Aufmerksamkeitspuls:** **On appear**, **pulse**, **Infinite** an und eine **Duration** von 1500. - **Hover-Puls:** **On hover**, **pulse** und eine **Parent number** von 0, damit nur das Element selbst reagiert. - **Tab-Einblendung:** **On trigger** und **fadeIn** auf den Elementen in einem Tab. Sie spielen bei jedem Öffnen des Tabs. ## Was Sie sehen Wenn Sie den Text speichern, spielt der Editor beide Effekte: Die Überschrift blendet sich über 800 Millisekunden von unten ein und die Schaltfläche folgt 600 Millisekunden später. Besucher sehen dasselbe, während der Abschnitt ins Bild scrollt, einmal pro Seitenaufruf. Beide bleiben unsichtbar, bis ihr Effekt startet, weil **Before in-animation** aktiviert ist. ## Settings | Einstellung | Was sie bewirkt | Standard | |---|---|---| | **Animation start** | Wann der Effekt spielt: **On appear** (ins Bild gescrollt), **On hover**, **On click** oder **On trigger** (wenn die Karussellfolie, der Tab oder der Toggle, der das Element hält, öffnet) | **No animation** | | **Animation in** | Der Eingangseffekt: Einblendungen, Slides, Zooms, Flips und Aufmerksamkeitseffekte wie Bounce, Pulse und Shake | **No animation** | | **Animation out** | Der Ausgangseffekt, aus derselben Liste. Erscheint nur für **On hover** und **On trigger**. | **No animation** | | **Hidden** | **Before in-animation** hält das Element unsichtbar, bis sein Effekt spielt. **After in-animation** verbirgt es, sobald der Effekt endet. | Keins | | **Infinite** | Wiederholt den Effekt ohne Ende | Aus | | **Appear boundary** | Für **On appear**: wie weit unter dem Bildschirm der Effekt startet, in Prozent der Bildschirmhöhe. 0 startet ihn, während das Element ins Bild scrollt; 100 startet ihn eine Bildschirmhöhe früher. | 100 | | **Duration** | Länge des Effekts, 0 bis 3000 Millisekunden | 1000 | | **In-delay** | Warten, bevor der Eingang spielt, bis 10000 Millisekunden | 0 | | **Out-delay** | Warten, bevor der Ausgang spielt, bis 10000 Millisekunden | 0 | | **Parent number** | Für **On hover** und **On click**: auf welches Element Besuchende zeigen oder klicken. 0 ist das Element selbst, 1 sein Elternelement, 2 dessen Elternelement. | 1 | Spalten haben kein Panel **Animation**. Auch nicht die einzelnen Tabs, Toggles und Folien in Layout-Elementen. Animieren Sie stattdessen das Element darin. ## Wenn Sie die Animation nicht sehen - **Das Element erscheint nie.** **Before in-animation** verbirgt es, bis sein Effekt spielt, aber **Animation in** ist **No animation**. Wählen Sie einen Effekt in **Animation in**. - **Der Effekt spielte einmal und stoppte.** **On appear** spielt einmal pro Seitenaufruf. Laden Sie die Seite neu, um ihn erneut zu sehen, oder schalten Sie **Infinite** für einen sich wiederholenden Effekt ein. - **Der Effekt startet, bevor Besuchende das Element erreichen.** **Appear boundary** ist hoch: Bei 100 startet der Effekt eine Bildschirmhöhe, bevor das Element ins Bild scrollt. Setzen Sie es im Panel **Animation** auf 0. - **Zeigen in Elementnähe startet den Effekt.** **Parent number** ist 1, daher hört das Elternelement auf den Zeiger. Setzen Sie **Parent number** auf 0. ## Wie geht es weiter? - [Hover-Effekte](/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte): Farben, Schatten oder Deckkraft ändern, während der Zeiger auf einem Element ruht. - [Hintergründe](/de/hc/dokumentation/dxpr-builder-lernen/design/hintergruende): dem animierten Abschnitt Farbe, Foto oder Verlauf geben. - [Karussell-Layout](/de/hc/dokumentation/dxpr-builder-lernen/layout/karussell-layout): **On trigger**-Effekte bei jedem Öffnen einer Folie spielen.