Plugins>Scrollable Animation

Scrollable Animation

TechnicalMediaMobileContainersVisual Elements

$29 once or $7/mo Check it Live

Ready to start your own project?

Plugin details

Overview & Key Features

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

Installation

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

Need help adjusting your new application?

Moving off Bubble? We migrate Bubble apps to custom code, or help you optimize the one you have.See how it works →

Support

And if you have any questions, reach out to us at support@mindforapps.com