Using Sprite sheet animation?

Idea
1

how would or can one use a sprite sheet for animation and icon states in Bubble?

2

This would most likely require custom HTML/CSS/JavaScript. Can you explain more in detail what you are trying to achieve?

3

Hey Phillip,

So i successfully did a animation in a flipbook type fashion which you can see here!

Test Dynamic Animation States & conditions

Your thoughts on how to go about solving this or superior wisdom is appreciated :slight_smile:

  1. Can I upload a list of images and based on click have the carousel start at a certain image so that the animation is triggered from there. I would like to just have ONE carousel that uploads so that the browser or frontend does not need to call the server anymore after that is the idea behind having all animation image assets in 1 carousel.

Note*** Am I right in thinking that having ALL animation assets in one carousel UPLOADED on page load will make the UI experience smoother & faster by it not having to run for more assets or is having it call different ones as the conditional state changes be faster??? I defer to your knowledge.

Here is a Example:

  1. On page load photo carousel, Left Arrow Button, Right Arrow Button
  2. Carousel Contains
    • Images 1-10 are figure walking in place
    • Images 11-50 are the character running to the left
    • Images 50-100 are the character running to the right
  3. On click of RIGHT ARROW BUTTON carousel images 50 is triggered as a start point of image asset TO DISPLAY photos til 100 sequence to begin
  4. On click of RIGHT ARROW BUTTON carousel images 11 is triggered as a start point of image asset TO DISPLAY sequence to begin and end at 50
  5. When neither are NOT SELECTED have carousel images 1-10 is triggered as a start point of image asset sequence to be

Question is:

  1. How can I trigger those specific image sequences within the carousel without having to do a additional request or call and simply access the images that are already loaded on the page and set conditional triggers/invisible buttons to begin the animation from the different starting points from within the current carousel?

lol Forgive the redundant explanation.

  1. Is there a way to just upload 1 SVG image with all the animation panels on it. So its just one image with everything on it. Then just have some sort of state or trigger display the section of the image into 1te viewer. So it my guess is that its an invisible image thats triggered to display sections rapidly by shifting the image around.

***Idea: Would be to create a “MASK” asset like large White Square that could go ON TOP of the entire page but has a rectangle hole in it in the exact position I would like of the Master Images “SECTIONS” to display rapidly in within the viewable RECTANGLE SPACE. Thus covering the unwanted sections to the user, keeping the image state on display, and just shifting around the SVG asset rapidly to give the illusion of animation. Would this method be faster because the page would only need to upload ONE asset that has all the animation states?

Thanks for any time you spend thinking or helping you could bring to the situation!

  • Reymond
4

I think you can upload separate gifs within a single image element (which would look like a flip book), and then time its visibility so that the gif becomes hidden after its duration (to prevent the gif from starting over). This would probably make things much easier on you!

5

But would that affect performance rather than 1 library or one SVG uploading? and wouldn’t the programmer have more seamless smoother transitions and control? My goal is to have an entire UI animated in After Effects to have the “illusion” of a 3D type interface so recon multiple GIFS would trip up or have a flikr in their somehow. The gifs would be kinda huge even after compressed. Unless you think its possible to do a video points?

The example I gave is a basic use case but I have a really great Animator I work with and we could create some really amazing UI experiences if we can sort this technique out or determine if its possible. Performance & speed is KEY in making this worth a shot. Any thoughts on the button triggers to start at different image points in the carousel?

6

Ah, my apologies - I’m not sure of the best way to achieve that. I wish I could be more helpful, but I don’t have that much experience with animating in Bubble, aside from the built-in element actions and transitions.

Could you upload the image files and then use a repeating group, where the buttons scroll to specific entries in the repeating group, instead of using the slideshow element? The repeating group’s data could be “Animation” containing an image field (type: image) and a position number (type: number). Then you would use the action ‘scroll to entry’.

7

If you want to try SVG:

A) Use a HTML element and put the SVG source directly in there, for example:
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>

To have Bubble affect the content, replace part of the definition with dynamic data. This redefines the entire SVG when any of the dynamic data changes, so not ideal for efficiency.

or B) In the HTML element, create a SVG from source url, then manipulate/animate it using javascript, like in:
http://www.petercollingridge.co.uk/data-visualisation/using-javascript-control-svg

The javascript to manipulate can use dynamic data to send values, but be done on a separate HTML Bubble element to prevent the SVG being redefined/reloaded.

There are also a heap of javascript libraries for manipulating SVG.

1 Like