User Rating: 0 / 5

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

{ScrollAnimation animation="enum" offset="integer" duration="integer" delay="integer" easing="enum" position_trigger="enum" once="boolean"}element to be animated{/ScrollAnimation}

This tags animates every content on scrolling that is between this tag.

To give your page a better experience, sometimes it is necessary to highlight certain things. With this tag i.e. facts can flow to emphasize significance as the user scrolls down. Based on AOS.

Params for ScrollAnimation:

animation: Sepcifies the animation that should occur of the element gets visible.

possible values: fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left, zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right, flip-left, flip-right, flip-up, flip-down, slide-up, slide-down, slide-right, slide-left

default: fade-up

offset: Defines the offset from the bottom viewport in pixels when the animation should trigger.

possible values: all integers

default: 120

duration: The duration of the animation in 50ms steps.

possible values: 50, 100, 150, ..., 2900, 2950, 3000

default: 400

delay: Defines a delay in ms before the animation starts.

possible values: all integer values

default: 0

easing: Defines a timing function to ease elements in different ways. This page gives you an good overview of the behaviour of the different functions.

possible values: ease, easeInSine, easeOutSine, easeInOutSine, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInBack, easeOutBack, easeInOutBack, easeInElastic, easeOutElastic, easeInOutElastic, easeInBounce, easeOutBounce, easeInOutBounce

default: ease

position_trigger: Specifies which position of the element on which position of the viewport should trigger. The first part means the anchor point of the element and the second part the position of the element in the viewport.

top-bottom means: When the top of the element passes the bottom of the screen the animation triggers.

center-center means: When the center of the element passes the center of the screen the animation triggers.

possible values: top-bottom, center-bottom, bottom-bottom, top-center, center-center, bottom-center

default: top-bottom

once: Specifies if the animation should be executed only when the user scrolls the first time to the element or every time the user scrolls up and down to the element.

default: false

How to use it:

{ScrollAnimation animation="flip-left"}{LoremIpsum /}{/ScrollAnimation}

{ScrollAnimation animation="zoom-in" duration="2000" once="true"}{LoremIpsum /}{/ScrollAnimation}

{ScrollAnimation animation="fade-up" duration="1500" easing="easeOutBounce"}{LoremIpsum /}{/ScrollAnimation}

Example:





See on the page of AOS for more examples.


Available for: