Module Description
This module creates an animated scroll to elements.
Single and multiple hashes in the URL are allowed. This are some correct URLs:
* example.com#scrollToMe
* example.com#scrollToMe#AndToMe
* example.com#scrollToMe#AndToMe#AlsoToMe
The scroll speed, pause, correction and easing can be set per element (see below).
Default settings can be set on /admin/config/animate-scroll-to/settings
The settings can be overridden per element with the following attributes:
* data-scroll-speed
(value in milliseconds, standard default is 600)
* data-scroll-pause
(value in milliseconds, standard default is 3000)
* data-scroll-correction
(value in pixels, standard default is 0)
* data-scroll-easing
(value as string, standard default is 'swing')
For example:
<p id="scrollToMe" data-scroll-speed="400" data-scroll-pause="8000" data-scroll-correction="150" data-scroll-easing="linear"> Hello world! </p> <p id="AndToMe" data-scroll-speed="300" data-scroll-pause="6000" data-scroll-correction="100" data-scroll-easing="swing"> Hello world! </p> <p id="AlsoToMe" data-scroll-speed="200" data-scroll-pause="4000" data-scroll-correction="200" data-scroll-easing="linear"> Hello world! </p> Since 8.x-1.0-alpha3 states are added to the elements through data attributes:
* [data-scroll-state="will-become-active"] -> When the element will become active sometime.
* [data-scroll-state="is-becoming-active"] -> When the page is scrolling to the element.
* [data-scroll-state="is-active"] -> When the scrolling has been stopped and it is the current element.
* [data-scroll-state="was-active"] -> When the element was visible earlier while scrolling.
Drupal 9 The module is tested in Drupal 9. If you have trouble using this module in Drupal 9, please create an issue in the issue queue.
Single and multiple hashes in the URL are allowed. This are some correct URLs:
* example.com#scrollToMe
* example.com#scrollToMe#AndToMe
* example.com#scrollToMe#AndToMe#AlsoToMe
The scroll speed, pause, correction and easing can be set per element (see below).
Default settings can be set on /admin/config/animate-scroll-to/settings
The settings can be overridden per element with the following attributes:
* data-scroll-speed
(value in milliseconds, standard default is 600)
* data-scroll-pause
(value in milliseconds, standard default is 3000)
* data-scroll-correction
(value in pixels, standard default is 0)
* data-scroll-easing
(value as string, standard default is 'swing')
For example:
<p id="scrollToMe" data-scroll-speed="400" data-scroll-pause="8000" data-scroll-correction="150" data-scroll-easing="linear"> Hello world! </p> <p id="AndToMe" data-scroll-speed="300" data-scroll-pause="6000" data-scroll-correction="100" data-scroll-easing="swing"> Hello world! </p> <p id="AlsoToMe" data-scroll-speed="200" data-scroll-pause="4000" data-scroll-correction="200" data-scroll-easing="linear"> Hello world! </p> Since 8.x-1.0-alpha3 states are added to the elements through data attributes:
* [data-scroll-state="will-become-active"] -> When the element will become active sometime.
* [data-scroll-state="is-becoming-active"] -> When the page is scrolling to the element.
* [data-scroll-state="is-active"] -> When the scrolling has been stopped and it is the current element.
* [data-scroll-state="was-active"] -> When the element was visible earlier while scrolling.
Drupal 9 The module is tested in Drupal 9. If you have trouble using this module in Drupal 9, please create an issue in the issue queue.
Module Link
Project Usage
251
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the issue of creating animated scroll effects to specific elements on a webpage, with the ability to customize scroll speed, pause, correction, and easing settings per element.
Data Name
animated_scroll_to