[New Plugin] - Video Scroll Animation

Showcase
1

Video Scroll Animation released!

I am excited to announce this.

I was inspired by Apple for this plugin. Apple uses this feature in many parts of the website and I think it has a direct impact on sales.

Users can scroll and play the video uploaded to the plugin. You can increase the interaction of your users with your application with this plugin which offers a different video playback experience. For e-commerce, education or just for fun!

ezgif.com-video-to-gif (1)

Important points to be considered while using

You can position this plugin on your page however you like, but this element remains fixed on the page for 1000 times the length of your video in seconds.

This means that if your video is 5 seconds, your video will run and remain fixed on the page for 5000 pixels from the Y value that the video started.

Therefore, if you want to add any item under your video, you should put the item 5000 pixels below the Y value that the video started.

The plugin element has 2 core properties. The first property is “video time (sec)”. Enter the length of the video by seconds here. The second property is “speed”. This property’s default value is 1. You can increase it from the edit tab. If you do it, you should divide “video time (sec)” value by “speed” value.

Let’s examine a scenario:
Let’s say the video we want to add to the plugin is 10 seconds. With a speed of 1, the video can be played for 10,000 pixels. If I increase the speed value from 1 to 2, the video speed will increase 2 times. Thus, the video will end after 5,000 pixels. So we have to reduce the “video duration (sec)” value to 10/2 = 5.

In this plugin, the new frame of the video is loaded while the user is browsing the page. That’s why small videos always look more fluid. This plugin supports .mp4, WebM and Ogg video types. Among these genres, Webm offers the best compression and highest quality, you can upload your videos by converting them to WebM format with free converters. (Please note: macOS and iOS do not support Webm format)

Here you can see how a low size video looks like:

Supported browsers:
Microsoft Edge
Google Chrome
Opera

I think I can solve problems with other browsers in the coming days.

Thanks in advance for using this plugin!

While preparing this plugin, I received help and advice from several people. I especially want to thank them!

@eren @shaun @vini_brito @Jici @eli @luke2

Preview link: Your Bubble app
Plugin page: Video Scroll Animation Plugin | Bubble

13 Likes
2

A great plugin, @Efe! :star_struck: It can make designs more awesome, or interesting app ideas can come up!

I look forward to seeing more!

1 Like
4

Great plugin! It looks amazing :upside_down_face:. Good job mate @Efe keep up the good work. I’m waiting for new ones.

2 Likes
5

Hey @Efe , awesome work on this.
Wondering if you’ve solved the issues with the other browsers yet and if its all stable.
Thanks so much!

7

Hello so I believe I figured everything out and have it working correctly but unfortunately it is not an ideal setup. Having to add such large amounts of vertical space is far from ideal for most pages, why can’t the scrolling motion work while the cursor is scrolling on top of the element?

Then, as you can see in my test page here Video Testing, I’m getting a stop frame mode of operation and it is not rendering the video in a smooth way. The video came out of After Effects at 30 FPS and that I what I have the FPS setting set inside the plugin.