[Free Plugin] Scrolling Anim8

Hello again,

Just thought I’d release a new simple plugin that allows you to trigger animations to show elements when you scroll to them, namigly this one: Scrolling Anim8!

It negates the need to try and work out current scroll positions in order to show items because the plugin does that for you, which is handy!

This plugin includes 26 different types of animations, 20 different easing options and 9 different anchor placements (with the further option of using another element as an anchor).

Within the plugin you can configure the above options, as well as:

  • Offset (px) required from the original trigger point
  • Animation delay (ms)
  • Animation duration (ms)
  • Whether to animate once or every time the object is scrolled to

Many of these options can also be styled so you can use the same animation type for all pages without having to redefine all of the options each time.

Each Scrolling Anim8 element can also include any number of Bubble elements in a comma-separated list, although you can of course add just one Bubble element if you wish. I won’t judge. You can add any number of Scrolling Anim8 elements to the page to make varying and interesting transitions.

Demo page: https://scrolling-anim8.bubbleapps.io
Plugin page: https://bubble.io/plugin/scrolling-anim8-1594045112415x184109969454137340

Let me know how you get on!

Stuart B

10 Likes

Hi! This plugin is great, but it seems to just “show/hide” elements on mobile. Have you run into this as well?

@talkingoldfish Can you give us more context around the easing controls?

just came to say great! What is the uderlaying css library ?

Hi,

Thanks, glad you liked it!

I can’t really take too much credit, the underlying Javascript library does the grunt of the work, which is courtesy of the truly excellent Animate on Scroll library. All I did was add a Bubble Plugin wrapper for it, which really only equates in this case to around 50 lines of code!

Stuart B

1 Like