Does Bootstrap have any system for doing 'character/cutout' style animation?

General Random
1

Hi. Seeing as Flash is not a thing anymore, and HTML5 canvas support seems sketchy, I’m trying to find some good/compatible method for doing some VERY simple ‘character’ animation these days.

I say character animation only to distinguish it from the usual ‘menu bar flying in and unfolding’ type of animation which most people would point me to.

I essentially want to create a character, made of several separate parts (ex. head, torso, arm), and then do some VERY light animation with it (tilt the head, rotate the arm, etc).

I previously used Flash, and was hoping that HTML5 Canvas would be the replacement, but I am worried about compatibility, and from what I’ve read, I’m not really confident about it.

Currently, I’m just using animated GIFs, which work great. But, I’m wanting to see if there’s something better, which is actually supported universally, with no annoying quirks or requirement for workarounds and coding hacks.

I’m loving Bootstrap, and was wondering if it has any features that would allow very simple animation… Again, just essentially layering some bitmaps on top of each other, and doing very basic movement and visibility switches (invisible/visible state) to do blinks. I suppose I would be okay if the character had to be vector-based, although bitmapped would be preferable.

2

Hi @ ladlon,

Did you see the interactions plugin that is integrated in Pinegrow?

Interactions Info

It’s an extra paid feature that you pay for every year (as long as you want it!) and does exactly what you want. It’s based on the GreenSock library (web animations) https://greensock.com/

Bootstrap it self is just a HTML, CSS, SCSS and JavaSript framework. There are also free options, but they need a little coding like WOW js https://wowjs.uk/

Regards,

David

1 Like
3

Hello again! Thanks for the response.

Ya, I noticed the Interactions plugin around the time it was introduced. I guess I wasn’t sure if it, or any of the usual ‘interface animation’ type methods/products would do what I want. But, I should look further into it. I thought all those other things were just for one-play ‘reveal’ type situations, going from one state to another (only 2 states) based on how much of the element is onscreen (…as opposed to a multi-keyframe, continuously playing type of animation).

That WOW thing appears to be Javascript based, so I guess that means Javascript is capable. I was originally simply going to do it by coding (via Javascript) FULL images to be displayed in the same location, one after another, like a slideshow, but where the images are of the character, with slightly different changes in their pose/expression, resulting in a flipbook type thing… but, as much as that might work (essentially a slideshow), it’s not the most efficient way, as far as bandwidth, since full frames would be loaded each time (rather than little patches of the areas that actually change).

I suppose I could code it to place patch images at specific areas. I wasn’t sure how compatible Javascript was across the various platforms. I have to see if I can find a current chart for that. Plus, I’m not sure if some people switch Javascript off for security reasons or something.

If I go the Javascript route, I can then also randomize the order/duration of images, which would be really great. Previously, I was doing similar things with ActionScript (and, in fact, I’m essentially replacing my old, existing Flash animation header).

I’m actually willing/eager to further learn Javascript, especially since it seems to share similarities to ActionScript anyway. Again, I just wasn’t sure if it’s a reliable method to use (as far as compatibility, equality of interpretation, chance of it being disabled by user, etc).

I’m going to try an HTML5 Canvas test maybe today, if it seems compatibility may be okay.

I understand that CSS perhaps has some animation capability, but maybe that still ends up using Javascript anyway.

More reading and searching…

Thanks!

4

You should not be finding any issues with compatability, I’m not sure why you’re under that impression? Canvas has been widely supported for a long time. https://caniuse.com/#feat=canvas

It may go a long way to see a common example of one your GIF’s so someone can make a suggestion.

5

GreenSock (the core of interactions) is cross browser compatible, but you can choose not to show it on mobile if you want. Wow js as well. I would browse around the Greensock website to see what is possible. SGV animation for example are great and low in bandwidth:
Example of SGV animation with Greensock
Interactions is going to be updated to the same version as Greensock soon I hope!

6

It actually sounds similar from 2 years ago.

But understanding what your GIF’s look like would go a long way regarding suggestions if you’re still having trouble moving on after those 2 years. For anything elaborate or unique custom coding will be required as you can only get so much from any “preset” based approaches.

All of Chris Gannon’s work (seen in the link provided by @AllMediaLab above) is using custom coding and generally leverages paid Club GreenSock plugins such as DrawSVG, morphSVG, etc.

7

@Pinegrow_User: Hi. Ya, what I was reading said that it’s more the interpretation of the features, more than whether the feature is ‘supported’ (ex. differences in how certain things are displayed). Again, I’m not sure, so this is mostly me being concerned that some incompatibility or glitch/issue will appear on some devices. BTW, thanks for pointing out the CanIUse site. I forgot about that one! Very helpful!

@AllMediaLab: I’m not familiar with GreenSock, although you reminded me just now that I HAVE heard the name before. Add that to my list of things to look into…

The kind of thing I want to do is have (say) a 200x200 image of a character, and then (ideally randomly) show/hide, or rotate smaller images (ex. mouths, eyes) on top of that, to simulate blinks, facial expression changes, etc. Originally, you’d do it in Flash… currently, I’m doing it with an animated GIF (in the sense that I’ve premade the animation, and saved it as a GIF). I was considering trying it with Canvas. Even hand-coding it with Javascript shouldn’t be too big a deal. Just trying to get an up-to-date idea of my current options, and their respective compatibility, quirks, limitations, etc.

Thanks for your help so far. Very much appreciated! I’m probably going to give myself a crash course in Javascript, so I can at least play around with that. I think I’m sort of part-way there as it is, since I’ve done ActionScript and other languages before.

8

Hope to see the plugins in Pinegrow too! The plugins can be freely used in code pen!
Free Plugins Greensock
And the code copied to your editor of choice.
And if you like it you can join the club! It’s not expensive.

9

If so, I will be interested to see what can be done with presets and generalized settings. All the GreenSock plugins are superb and would allow PGIA users more features. But its hard to imagine such an approach replacing custom coding as it pertains to using GSAP directly and what can be accomplished when doing so.

Yes people can test and play freely with GSAP on Codepn and try the entire framework including all Club GreenSock plugins. But if you wish to use the paid for plugins elsewhere a license is required. Anyone whom takes the time to really give them a go should quickly see that a Club GreenSock license pays for itself quickly even considering a single project. Of course the core GSAP offers features that most people require, but the Club GreenSock plugin benefits speak for themselves.

10

I’m curious… Can Javascript place a smaller image (with alpha) on top of a larger image? I’m not familiar with whether layering images on top of each other is even a thing in HTML. I know there was a whole Z depth thing long ago, but not sure how stable/compatible that is. I guess natively images can overlap in HTML, although I don’t know how well alpha (of the top layer) is handled. I have a workaround in mind if the top layers can’t support alpha, though.

It seems I could do this with Canvas, as I have software that would allow me to make an animation, and then export it as HTML5 (…although, I am ASSUMING that makes it a Canvas element in the process… as opposed to just a Javascript thing).

Or, I could hand-code it with Javascript, which would give me the benefit of being able to randomize it, which would be great.

So, I guess I’ll teach myself Javascript, and play around with that. Failing that, I fall back to an animation exported as HTML5… and failing that, back to my animated GIFs!

I’ll definetly be looking further into the other options, as I’ll probably update this site’s elements over time.

11

It was mentioned 2 years ago in your previous thread. ;–)

If you can code it, then Javascript can do virtually anything you can imagine.

You can easily layer things with HTML and CSS via positioning, z-index, etc, as needed. You could also use transparent PNG’s etc., inside that approach.

Canvas is an HTML element generally controlled by Javascript.

See below, Javascript, CSS Transitions & Animation, Canvas, etc., (along with positioning and z-index)

Good luck with your efforts.

1 Like
12

Awesome… Yep, plenty for me to study today. I suspect I’m going to end up trying to hand-code it in Javascript, as I would really love to have the randomization.

Thanks for the info!

13

Just made a test page for you to show a animation made within Pinegrow. It’s only a background image and a SVG (the rocket) it’s not as smooth as I want, but maybe the coming update will solve that or I didn’t see a particular function. You have to reload the page to repeat the animation.
Simple example interaction with one vector image
No coding was needed! But I created my own animation by filling in some fields in a panel.

1 Like
14

By contrast using GSAP with custom coding directly, 10 lines of code:

Or with Three.js coupled with GSAP (over 10 lines of code ):

It becomes evident that inputs and sliders through an app have their limitations for what they can accomplish. The one using Three.js could not be accomplished in “Pinegrow Interactions”. But I even question if the first one with 10 lines of code could be accomplished with “PGIA”? I just looked at it briefly and unless I’m misunderstanding the inputs I can’t see where you would have input for things like

attr:{ cy: 185}
{clearProps:“all”}

But perhaps I overlooked some inputs in PGIA? That’s nothing against “Pinegrow Interactions” as it has its own limited purpose as @matjaz previously stated.

But it does quickly exemplify how custom coding whether it be using GSAP, Canvas, Javascript, CSS3, SASS, etc., is unparalleled with what can be creatively accomplished and rightly so.

I’m not sure you will get much randomization from Pinegrow Interactions currently until they upgrade it to GSAP 3 and if they then implement the built in GSAP 3 utility functions fully.

@ladlon From what you have described both here and the thread from 2 years ago, I would instead spend time learning things directly, I think you will be happier in the long run.

2 Likes
15

Yes I agree! At the moment interactions is very limited, hope the update will change it soon.

16

I would say it does what it was intended to do fairly well. But given that GSAP can animate virtually anything un-opinionated on a page, Pinegrow Interactions will never fully encompass the vast scope which is available to GSAP. Pinegrow Interactions uses GSAP for providing various interactions on a page within certain constraints. Time will tell how their implementation of GSAP 3 will expand those features further but you can never expect it to compare with direct GSAP coding.

17

Hello again, guys. First of all, thanks for the efforts! That was actually very insightful for me.

Ya, actually I’ve been spending the say (and continue to) learning Javascript. I’m starting from the absolute basics, despite me already having a pretty good grasp of general coding… just so that my knowledge is up to date and complete. I’ve already learned a few things I previously wasn’t aware of. (BTW, Net Ninja’s videos are really great for tutorial stuff… Clear and to the point, the way I like my tutorials!)

I originally bought the software MotionArtist several years ago for the sole purpose of exporting HTML5 (as it was a cheap, and seemingly easy, solution to create HTML5 based animations at the time. But, ya, I’m kind of aiming towards hand-coding the animations… at least in this case, as it’s really just going to be a loop of random number rolling, and then a specific action (blink, facial expression, hand move, etc) based on that number… and (unless I find there’s a preferred way), I’m going to assume that I’ll place a full image block of the character at the start, and then randomly add/remove overlaying image ‘patches’ (smaller images, such as eye blinks) over top that. Probably will all be ‘replacement animation’ method, although (if not a problem) I may actually build a segmented ‘puppet’ and apply rotations/position changes to the elements, too (ex. head tilt via an actual rotation, rather than a 2nd overlaying head image).

I’ll see when I get there… For now, I figure the best first step is to just properly learn (current) Javascript (and current best practices, etc)… then do some hands-on experiments, and see where that ends up. I feel pretty confident it should work out well.

Man, now I’m really feeling like doing some gamemaking again! I got to stay focused! :wink:

18

Tried an other animation with some old Greensock code from Code Pen and interactions.
Only for desktop! Used 1 background image from NASA and a SVG rocket the rocket fire and falling stars are from Code Pen mixed with the code from interactions.
Animation test 2

19

Yeah I remember the thread that was from. Go forth and code.

20

I was looking further into Greensock. Looks good, and I’m happy to see that there is a free/commerciallly usable version. Everything looks good.

I do have a few ‘concerns’ (…questions, really):

-How supported is the resulting code (out of the box, without adding additional modules, etc)? (I seem to remember there was a section on their site claiming it is very universal)

-That said, if it has built-in coding that makes it so compatible, how much does that bloat your page code? (Not accusing it… just asking)

-The only thing that is a bit ‘unfortunate’ about Greensock is that you end up animating with code, rather than the usual graphic interface you have in regular animation software. Fine for interface transitions, etc… but character animation, it could get a bit abstract animating with code. Not saying it’s a deal-breaker… just something I wish would be added (if it hasn’t already). My main use for it would be to animate cutout style puppets (hinged arms, swap animation eyes, mouth, etc).

Still, this looks good so far. I’m just curious to hear some feedback about these points.