Components/Visual effectsIntroduced in 1.3.0

EAnimateOnScroll Animate on scroll

import EUI 1.0

Examples

Scroll into view

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Repeated entry

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 once: false ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Once only

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 once: true width: 300 height: 100 ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Custom viewport

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 viewport: viewport ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Slide in

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 duration: 600 enterEffect: "slideInUp" ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

contentalias

Content slot; declare QML child objects directly inside the component.

Defaultbody.data

oncebool

Play only the first viewport entry animation.

Defaultfalse

distancereal

Animation displacement in pixels.

Default24

durationint

Duration of each entry or exit animation in milliseconds.

Default300

targetItem

Item receiving the animation; defaults to the internal content container.

Defaultbody

viewportItem

Optional viewport; ancestor clipping boundaries still apply.

Defaultnull

enterEffectstring

EAnimation effect name used on viewport entry.

Default"fadeIn"

leaveEffectstring

EAnimation effect name used on viewport exit.

Default"fadeOut"

inViewportboolRead only

Whether the control intersects the visible viewport.

Defaultobserver.inViewport

Signals

SignaturePurpose

exited()

Emitted when the component leaves the viewport.

entered()

Emitted when the component enters the viewport.