🚀[NEW PLUGIN] Scrollable Animation

Showcase
1

Hello fellow Bubblers!
Some time ago we published a new plugin and now share this news with you:

1-04

Scrollable Animation.
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

.

.
Scrollable Animation
.

Demo:
For details, demos and instructions, visit the demo and manual pages:
DEMO-1

DEMO-2

MANUAL-1

MANUAL-2

GUIDE-MAIN

GUIDE-PIN

GUIDE-STAGGER

GUIDE-TEXT

GUIDE-FILTERS

GUIDE-CUSTOM-CSS

GUIDE-TOOLS

Plugin page:

Support

If you have questions, reach out to us at contact@mindforapps.com
We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

10 Likes
2

This is a cool plug-in! Are used stuff like this in my landing pages that I build with another platform. Nice work

1 Like
3

Nice Plugin! Thanks

1 Like
4

Thanks for the documentation and guides! Hope to use this in future projects. Haven’t played around with it yet.

Can you make the editors for your demos public? I can’t access them to see what you’ve done

1 Like
5

Hey!
Sorry, I don’t know how it happened. All demo page editors were publicly available. And why the access was suddenly closed, I do not understand. Probably some kind of glitch.

I fixed everything. Access is open.
Thanks for letting me know about it.

1 Like
6

Is it possible to pin multiple elements to 1 Scrollanimation-Element?
It’s a little confusing as the input field of the Element says: “Pinned ElementS” - and in the doc it says only one element can be pinned.

What I want to achieve is use 1 ScrollAnimation Element to pin 3 headers. All of them behave exactly the same.
Bildschirmfoto 2021-06-11 um 11.12.23

Also If I pin the element ID: “ADD-header” and call them all the same it only works on 1.

A question more out of curiosity - however if someone has a lot of different headers it would make things much easier if you could pin multiple elements.

7

Hey!
Sorry for the late reply, but I was out of touch for a while.

Yes, you can specify several elements in the “Pinned Elements” field, but then in the “TriggerElements” field you also need to specify several trigger elements (the number of trigger elements must correspond to the number of elements to be fixed).

I created a simple demo page. It shows three examples:

There you can go to the editor (OPEN IN EDITOR) and see the settings and connections of the workflow.

Example 1. Fixing three images using three different trigger elements. We use the “pinOnly” function. We just fix the elements and don’t use any other animation.

Example 2. Fixing three images using three identical trigger elements. But don’t use the “pinOnly” function. And we connect animation through a workflow.

Example 3. We specify one trigger and three pinned elements. And we get the situation you described. Only the first item is pinned.

In my opinion, the best connection option is example 1. I mean, use a trigger for every item. If each element has its own trigger element, then it will be much easier to adjust the responsiveness of the page.

If you have more questions, please contact me and I will definitely answer.
Thank you.
Good luck.

1 Like
8

Thanks for the really good answer. I was able to solve it.

Is it also possible to create a sticky header that behaves like this on in Instagram: https://vimeo.com/586476109

Basically disappear when scrolling down & reappear when I scroll back up.

Thanks,
Manuel

9

Hey!
I’m glad you liked our plugin.

Honestly, this effect can be realized using standard “Bubble” tools.

editor:

Our plugin is intended for more complex things that cannot or very laboriously be done using the “Bubble” editor.
But if you want this effect can be implemented using our plugin.

Here are two fundamentally different ways:

  1. Use FloatingGroup and “opacity” property.
    https://scrollable-animation-plugin.bubbleapps.io/version-test/test_sticky_header_01
    editor:
    Scrollable-animation-plugin | Bubble Editor

  2. Use the “Pinned Elements” field and the “opacity” property.
    https://scrollable-animation-plugin.bubbleapps.io/version-test/test_sticky_header_02
    editor:
    Scrollable-animation-plugin | Bubble Editor

(if someone is interested, I can describe in detail how these two methods are implemented)

As you can see, all three options look almost the same. And if so, why use additional plugins if you can do it using “Bubble”

Thanks.
Good luck.

1 Like