MARKETPLACE
PLUGINS
SCROLLABLE ANIMATION
Scrollable Animation logo

Scrollable Animation

Published September 2020
   •    Updated this month

Plugin details

Scrollable Animation helps you to easily react to the user's current scroll position.
It's the perfect library for you, if you want to ...

-- animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).

-- pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).

-- toggle custom CSS of elements on and off based on scroll position.

-- decorate and animate text blocks.

-- effortlessly add parallax effects to your website.

ScrollMagic Javascript library was used when creating this plugin

Demo:
For details and demos visit the demo and documentation pages:

https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_1
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_2
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_manual_1
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_manual_2
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_general
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_pin
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_stagger
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_text
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_filters
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_customcss
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_tools


Plugin Page:
https://mindforapps.com/plugin_details/scrollable-animation

Support
If you have questions, reach out to us at [email protected]

We appreciate your reviews and suggestions.

$29

One time  •  Or  $7/mo

stars   •   0 ratings
154 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Mind For Apps logo
Mind For Apps
Joined 2018   •   33 Plugins
View contributor profile

Instructions

1. Select a group on the page that will act as a trigger and assign it an ID Attribute.  The animation of the target element will start when the trigger scrolls to a certain offset (specified in the settings)
2. Select the target element to which the animation will be applied and assign it an ID Attribute. It's best if you place the target element inside the group from step 1 (trigger).
3. place the "ScrollAnimation-Scene" element on the page and in the "triggerElements" field specify the identifier of the trigger element from step 1
4. In workflows, select the "Page is loaded" event and launch the "Tween ScrollAnimation-Scene" action where in the "TargetElements" field you must specify the target element identifier from step 2
5. Configure the desired animation in the "Tween" element and the "ScrollAnimation-Scene" trigger element

This is the most primitive connection scheme. For a more complete overview, please visit the main documentation page:
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_general

There are also additional documentation pages where the concept of the plugin is explained and the main elements and parameters are discussed in more detail:
https://mindforapps.com/plugin_details/scrollable-animation

https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_manual_1
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_manual_2
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_pin
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_stagger
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_text
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_filters
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_guide_customcss
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_tools

Also on the demo pages you can go to the editor (OPEN IN EDITOR) and view the provided demos in detail:
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_1
https://scrollable-animation-plugin.bubbleapps.io/version-test/scroll_animation_2

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Technical   •   Media   •   Mobile   •   Containers   •   Image   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales