Are Animations On Mobile Possible?

JustinC · December 8, 2016, 1:14am

Are animations of groups and things of this nature possible on mobile?

philip · December 8, 2016, 1:32am

First: yes, you can animate groups, icons, text, etc with Workflows. The workflow would go as follows: Add an action -> Element actions -> Animate -> select element or group to animate in or out (show or hide). You can also create workflows that show a popup and within that popup you animate a group/icon/whatever whenever the popup group is visible, and set a navigational time delay of x seconds before hiding the popup.

This is the extent of built-in animations in Bubble that I know of. I’m going to write up some more info on how I implemented SVG animations in an app, stay tuned!

JustinC · December 8, 2016, 1:34am

Looking forward to your post on this!

villasenorindustries · December 18, 2016, 10:59pm

Hey Phillip, Would it be a good idea to make a “animation” for a UI in this method. My brother is a great after effects guy and we could create a video and have invisible touch points act with the database and if statements to send it to different parts of the video to play for different states. So the the user he wouldnt know the difference but from Bubble standpoint its just jumping and playing through different parts of the video?

Just wanted your thoughts cuz I’m unsure if this is bad way to do it or if would cause performance issues?

Thanks in advance for any feed back you got

philip · December 19, 2016, 2:32am

I’m not sure I completely understand what you’re proposing with the video touch points and all — I can kind of imagine based on your description… I’m not sure you will be able to control a video player in this fashion just using Bubble. Maybe if you were writing custom JavaScript and HTML with a 3rd party video player this would be seamless and doable within Bubble.

I haven’t gotten around to writing about how I’ve been implementing SVG animations. One framework I started out with was Snap SVG http://snapsvg.io/ — And another, BodyMovin. Your After Effects friend will love it https://github.com/bodymovin/bodymovin

I recommend code-based animations versus using video. Video just isn’t practical on mobile devices yet (the video player is difficult to ‘get right’ across all mobile views).

villasenorindustries · December 19, 2016, 7:48am

Hmm ok that makes sense. What about more of a flip book type method like the kind you make when your a kid? In Adobe Photoshop I’m able to spit out video into 12 frames individual frames per second. So for example since most UI elements are really short 2 or 3 seconds.

Using Bubble, could I set a LOOP trigger button to have those set of images spitout one by one quickly in order to have them “animate.” Then have invisible buttons appear on the state change on the areas In which I want the user to interact with?

Kinda crazy but if it is possible to create a "flip book or GIF " type workflow with pictures. That would open up a world of possibilities as far as making some advance looking animations or UI with it only being the illusion of being truly animated by javascript. Figure it would have quick performance since the set of images would be tiny little files.

Probably didn’t explain that very well still new to bubble

ashley.benson.tait · June 15, 2017, 12:05pm

Yes, you can make a character that runs across the screen using the flipbook approach.

Simply upload a list of pngs, and have them show on screen… (run an action every .04x / second seems to be realistic) … Then set this running character in a box that you simply animate from point A to B across the screen.