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!
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
It can make designs more awesome, or interesting app ideas can come up!
. Good job mate