OT: Animating Bootstrap carousel

[pziecina]

You all know I am not a fan of bootstrap, but never the less, I have seen a few questions regarding this over the last year, so I though this article may be of interest to bootstrap users, (as reference) -

https://www.sitepoint.com/animating-bootstrap-carousels-gsap/

[osgood_]

Ive just billed the client £500 pounds to add a silly animation that brings nothing to the playing field but an annoyance value.

I just asked a couple of my funeral director clients should l make some coffins bounce around a bit............they said......

I just ask cheapo cheapo grannys kitchen doughnuts should l make a dozen doughuts bounce across the screen....they said....

Theres a time and a place. I just hope l dont see too much of this blige just because it can  be done. Sady l think l will be proven wrong as developers are already abusing its use just for the sake of doing so.

[Nancy OShea]

I think a little animation is fine in certain situations.  And a slider is a really good place for it.  It wasn't too long ago that we used PowerPoint slides with some animation effects.    This is just another version of the same thing really.  Thanks for the article, Paula.

Nancy

[osgood_]

Nancy OShea wrote:

I think a little animation is fine in certain situations. And a slider is a really good place for it. It wasn't too long ago that we used PowerPoint slides with some animation effects. This is just another version of the same thing really. Thanks for the article, Paula.

Nancy

The only place suitable for most animations in my opinion is those animations that have a button requesting that the user allows the animation to be played.

They are about as annoying as sound effects where the developer hasnt requested they be played. I have enjoyed the last few years where Flash had been assigned to the bin, now we are entering another annoying phase where this kind of stuff will be popping up everywhere for no other reason than its available.

I'll concede there are certain situations where a well crafted and thought out anmiation will bring something to the table but just sliding in some text or bouncing/twirling in an icon is not one of them, totally pointless and useless.

[Nancy OShea]

I don't think it's fair to say all animation is bad.  Neither is all animation good.  It really depends on the creative who is doing it and how it's used.

[pziecina]

Animations are as good as the creators abilities, and knowledge of correct use.

I am sure that if Dw, (or indeed Adobe) had a good css animation creation tool I would be using it, and possibly telling others how to, (for those interested there is no tool by anyone worth using).

Adobe purchased Macromedia for Flash, not just for building simple web sites, but for the on-line animation possibilities it offered. It even spent 10's of millions developing Edge Animate, which failed miserably because it and many of its users did not understand the web.

One can use 3d animations now, (well supported in browsers) and VR is in development for browsers. Will people produce rubbish and use these just inappropriately as Flash was used, or canvas and some css animations are now being used, yes, certainly. But, there will be some users that will create excellent examples for the use of animations, and they are the ones that will eventually set  the standard for the field.

A lot of people who call themselves web designers or developers, should not be doing so. The creators of web animated graphics will also have those who should not be doing so.

[osgood_]

pziecina wrote:

Animations are as good as the creators abilities, and knowledge of correct use.

I am sure that if Dw, (or indeed Adobe) had a good css animation creation tool I would be using it, and possibly telling others how to, (for those interested there is no tool by anyone worth using).

Adobe purchased Macromedia for Flash, not just for building simple web sites, but for the on-line animation possibilities it offered. It even spent 10's of millions developing Edge Animate, which failed miserably because it and many of its users did not understand the web.

One can use 3d animations now, (well supported in browsers) and VR is in development for browsers. Will people produce rubbish and use these just inappropriately as Flash was used, or canvas and some css animations are now being used, yes, certainly. But, there will be some users that will create excellent examples for the use of animations, and they are the ones that will eventually set the standard for the field.

A lot of people who call themselves web designers or developers, should not be doing so. The creators of web animated graphics will also have those who should not be doing so.

Less is more. I think we are now in the realms of providing too much in the way of poor programmes, frameworks, visual tools, scripts etc for unskilled people to clutter up the internet experience with poorly thought out solutions.

[BenPleysier]

A case in mind CSS-Tricks. Just wait half a minute and see the change. Also see the hover effect on the menu items.

[osgood_]

BenPleysier wrote:

A case in mind CSS-Tricks. Just wait half a minute and see the change. Also see the hover effect on the menu items.

Exactly what I'm talking about, pointless and sensless - that masthead is butt ugly and why does the shape need to change. Does it add anything, no.

I can see animation usage in say a graph to show the before and after effect or something similar but I'm not keen on using it for the sake of getting some movement into the page.

Looking at it again it looks more like some poorly conceived gif just cycling through frames, is it - I havent looked at the code. And do I need the navigation tabs dropping down 10mm on hover, no thanks. This is poor however you look at it.

[pziecina]

osgood_ wrote:

I can see animation usage in say a graph to show the before and after effect or something similar but I'm not keen on using it for the sake of getting some movement it into the page.

I think that is the problem, you are looking at what you require, not what others require, or are looking into creating.

Imagine a trainee car mechanic just starting to learn how a petrol engine works.

With well thought out and created animations, it is possible to show what is known as the 'modified otto cycle' and how the engine works, using a 'cut-out'  with animation of a car engine.

That is not just the future, but what people are actually producing, now.

As I have said before, a lot of what most people see on the web is what they want to see, and does not reflect what is available when one pays for access to specialist sites providing training and product support.

[osgood_]

pziecina wrote:

osgood_ wrote:

I can see animation usage in say a graph to show the before and after effect or something similar but I'm not keen on using it for the sake of getting some movement it into the page.

I think that is the problem, you are looking at what you require, not what others require, or are looking into creating.

I'm looking into where it can be useful and serve a purpose, not just as decoration.

pziecina wrote:

Imagine a trainee car mechanic just starting to learn how a petrol engine works.

With well thought out and created animations, it is possible to show what is known as the 'modified otto cycle' and how the engine works, using a 'cut-out' with animation of a car engine.

Yes, of course that is useful and a situation where I think an animation could be warranted. I have no issue with that but do you advocate that bits of text/images sliding in from the side of the page and a few icons spinning around on hover really add anything useful other than a bit of decoration which a lot of users might find extremely annoying.

pziecina wrote:

That is not just the future, but what people are actually producing, now.

I've not seen anything useful as yet while browsing around.

pziecina wrote:

As I have said before, a lot of what most people see on the web is what they want to see, and does not reflect what is available when one pays for access to specialist sites providing training and product support.

Never for one moment would I suggest that in the right circumstances animation could not be useful but the example you provided of the Bootstrap slide animation doesnt show that in my opinion and sadly its reflective of a lot of the animation that I have thus far seen.

[pziecina]

I'm not disagreeing with you Os, 90% of animation usage is not required, but the remaining 10% is what I am concerned about, and why I think the link to the tutorial worthwhile.

We cannot control what happens on other peoples sites, and we do not have to follow it. By posting a link to even a simple example, I hope to give those who cannot create animations at the moment, the inspiration to learn more.

Saying not to experiment or play with animations, is like saying this forum should not answer questions about html, css, javascript or whatever, before we see how it will be used, and then decide if we should help or not.

[osgood_]

pziecina wrote:

We cannot control what happens on other peoples sites, and we do not have to follow it. By posting a link to even a simple example, I hope to give those who cannot create animations at the moment, the inspiration to learn more.

Posting a link to crap usage of animations is only going to produce more crap being used. I can already here the cry of the masses - 'this is really exciting - how do we get our icons to spin around and our computer to slide in.

Id prefer to see a purposeful use of animation and then if someone is so intrigued by it they may set out in the right direction.

[pziecina]

This one uses css animations and a jQuery animation library, (could be done using css animations and animations api, (no jQuery)) -

http://codepen.io/juliangarnier/pen/idhuG

[Nancy OShea]

I while back I helped someone with an interactive quiz that gave users a little animation feedback.  A discrete bar on the left side moved down as users completed questions.  At the end of the quiz, the  page moved up and revealed their total score.  It was intended to be both educational and fun to use.  For that I think the animation succeeded.

If I can find it in my old files, I'll post a link.

Nancy

[osgood_]

pziecina wrote:

This one uses css animations and a jQuery animation library, (could be done using css animations and animations api, (no jQuery)) -

http://codepen.io/juliangarnier/pen/idhuG

In my opinion that is the correct use of animation for visual and educational purposes where a static image could not communicate what is needed very well as opposed to a bunch of icons and text dancing around the screen for no other purpose than decoration.

[pziecina]

The problem with the solar system animation is that for a beginner it would be too complexed.

I know the original links animations appears to be basic, but when i watched it the first time i could see how all the basic principles of animation had been included, I do think that in showing the basics, it is something users i hope can build on.

If it had been a simple copy/paste of code, i may have thought otherwise.

[osgood_]

pziecina wrote:

The problem with the solar system animation is that for a beginner it would be too complexed.

Exactly my point, keep it away from the hands of those that will abuse it and trash it and get it a bad name. Flash was a great tool but not for the web. It became main stream with the masses including poorly coded and implemented solutions because they only knew how to use a very small part of it.

[pziecina]

osgood_ wrote:

pziecina wrote:

The problem with the solar system animation is that for a beginner it would be too complexed.

Exactly my point, keep it away from the hands of those that will abuse it and trash it and get it a bad name. Flash was a great tool but not for the web. It became main stream with the masses including poorly coded and implemented solutions because they only knew how to use a very small part of it.

We have said the same about css layouts and flexbox, in the future we will say the same about css grid layouts.

The web is open to everyone, and anyone with the money can buy a program and create rubbish. No one can stop them doing so, all we can do is hope is that the sites that matter to us do not misuse what is possible.

MS Word created people who thought they could create well designed layouts!

[pziecina]

osgood_ wrote:

pziecina wrote:

That is not just the future, but what people are actually producing, now.

I've not seen anything useful as yet while browsing around.

Can be done using css animations, html 5 canvas and various animation libraries, such as the one I linked to -

https://www.youtube.com/watch?v=fNcZDrfT498

[pziecina]

I didn't notice that the animation in the css tricks link does serve a real purpose until I used the links on a tablet device.

Until then it was only a visual effect. Possibly another demonstration that we should stop thinking  'desktop'.

[osgood_]

pziecina wrote:

I didn't notice that the animation in the css tricks link does serve a real purpose until I used the links on a tablet device.

Until then it was only a visual effect. Possibly another demonstration that we should stop thinking 'desktop'.

Im guessing the drop down menu is an animation having not looked at the coding, which serves a useful purpose. However that stupid wavy ugly shape is pointless, really really pointless as are the jumpy navigation tabs on desktop. Its not a question of thinking about one or the other its thinking about the presentation on all devices.

Problem is I come from a design orientated background so I'd back myself over most to know what looks good and what looks cheesy, especially those who come to a creative environment from bricklaying or some other kind of profession.