Plugin to animate elements on your app as you scroll. WARNING: Only for responsive apps.


Based on:


https://github.com/michalsnik/aos/tree/v2


Description


The neoAnimationOnScroll plugin for VisualNEO Web allows developers to add animations triggered by scrolling, providing a dynamic, responsive experience as users move down a webpage. This plugin is especially useful for applications needing eye-catching content that engages users based on their scrolling behavior. Here’s a breakdown of its capabilities:

    • Scroll-Triggered Animations:
      • The plugin is designed to animate elements as they enter the viewport upon scrolling, with customizable attributes such as offset, duration, easing, and delay. Developers can initialize animations with neoAnimationOnScrollInitialize, which lets them set these parameters globally for consistent control over animation timing and effect.
    • Easy Setup with Data Attributes:
      • To animate an object, developers simply add the data-aos attribute to the desired element with the specific animation type, such as fade-in, slide-left, or zoom-in. This approach simplifies the animation setup process, allowing for quick and efficient integration without extensive coding.
    • Customizable Animation Effects:
      • The plugin supports a variety of animation effects, including fades, slides, flips, and zooms. These options allow developers to select effects that best match their app's aesthetic and functional requirements, enhancing user engagement with the app’s content.
    • Control Over Animation Timing:
      • Using parameters like offset, delay, duration, and easing within neoAnimationOnScrollInitialize, developers can customize when and how animations trigger, creating a tailored scroll experience that enhances the user journey through the app.

The neoAnimationOnScroll plugin is ideal for responsive apps aiming to boost interactivity and visual appeal by revealing elements as users scroll, perfect for portfolios, product showcases, or storytelling-based web applications​​.


All you have to do is to add data-aos custom-attr to any object, like so:


data-aos="fade-in"


Possible values:


fade

fade-up

fade-down

fade-left

fade-right

fade-up-right

fade-up-left

fade-down-right

fade-down-left

flip-up

flip-down

flip-left

flip-right

slide-up

slide-down

slide-left

slide-right

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

 

neoAnimationOnScrollInitialize

Purpose:

Initialize Animation on Scroll Plugin.


Remember to add the desired custom-attr (see plugin description)

Category:

neoAnimationOnScroll

Syntax:

neoAnimationOnScrollInitialize theOffset theDuration theEasing "theDelay"

 

theOffset

Change offset to trigger animations sooner or later (px) Default: 200

theDuration

Duration of animation (ms) Default: 400

theEasing

Timing function to ease elements in different ways

theDelay

Delay animation (ms) Default: 0

Created with the Personal Edition of HelpNDoc: Maximize Your PDF Protection with These Simple Steps