Adding subtle, elegant DIV animations on page load (css)

Report · Apr 11, 2017

Let's say I wanted my page to display items (mostly DIVs and SPANs) with a slight animation. One-time, non-looping, just to "ooh!" the audience a little bit on page load.

Here is an example of a page that fades all elements in at once, at the same time. It's not a big deal, but has a big effect on UX when compared to cold loading. Having just returned to coding after a few years off, I see that the "animation" property could potentially do the job on its own without any JS extras. Although when I went Googling for extras, I found them.

In my ideal scenario, I'd like DIVs to load invisible and immediately fade in (w/ slight timing offset so we can recognize the individual modules) and even add a subtle slide effect to boot (ie, they'd slide in from 20-30px while fading in).

If you make the offset timing random (for instance, 0ms to 50ms values, at random) then you could even create 1 function that affects all the tagged DIVs (that way you don't have to manually set the timer on the fade-in for each one).

How simple is what I'm trying to do? If it's just one class declaration, could someone get me started on the syntax?

(Am I better off just going with Animate.css, which I linked to above?)

Report · Apr 11, 2017

Animate.css is probably the way to go for you until you have a solid grasp on everything else CSS-related.

Animation in general can get pretty obnoxious in a website though and rarely brings anything to the table beyond the first visit.

The main thing you need to keep in mind when working with animations online is "Does this actually add to the experience or am I doing it because I figured out how?"

If it adds something, like a 3D product viewer that the user can choose to open or not, go with it.

If it's just because you can, like a bouncing header bar when the page loads, I'd caution against it.

Report · Apr 11, 2017

https://forums.adobe.com/people/Under+S. wrote
Let's say I wanted my page to display items (mostly DIVs and SPANs) with a slight animation. One-time, non-looping, just to "ooh!" the audience a little bit on page load.
Here is an example of a page that fades all elements in at once, at the same time. It's not a big deal, but has a big effect on UX when compared to cold loading. Having just returned to coding after a few years off, I see that the "animation" property could potentially do the job on its own without any JS extras. Although when I went Googling for extras, I found them.
In my ideal scenario, I'd like DIVs to load invisible and immediately fade in (w/ slight timing offset so we can recognize the individual modules) and even add a subtle slide effect to boot (ie, they'd slide in from 20-30px while fading in).
If you make the offset timing random (for instance, 0ms to 50ms values, at random) then you could even create 1 function that affects all the tagged DIVs (that way you don't have to manually set the timer on the fade-in for each one).
How simple is what I'm trying to do? If it's just one class declaration, could someone get me started on the syntax?
(Am I better off just going with Animate.css, which I linked to above?)

If you just want some simple fading in of containers:

<!DOCTYPE html>

<html>

<head>

<title>Fade In Containers</title>

$(document).ready(function(){

$('.one, .two, .three').hide();

$('.one').fadeIn(1000, function() {

$('.two').fadeIn(1000, function() {

$('.three').fadeIn(1000);

});

</script>

</head>

<body>

</div>

</div>

<h1>Three</h1>

</div>

</body>

</html>

I dont mind the example at the url you provided its pretty subtle - fades in the complete <body> of the page. I dont particulary like too much animation going on in a page, it can become irritating if its just there for no other reason than for the sake of it being there.

Report · Apr 11, 2017

I've used WOW,js with good results. It's mainly Animate.css + a little JS fallback for the bad browsers.

Reveal Animations When Scrolling — WOW.js

As Jon said, don't overdo it. A little WOW goes a long way.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 11, 2017

So for basic "just enough to show we bothered" animations (usually single-cycle, not repeating) we have 3 suggestions : animate.css, wow.js, and raw jquery.

Are all 3 more or less equivalent if my audience is a little more tech than the average (and less likely to still be using a 10 year old browser)?

Report · Apr 11, 2017

https://forums.adobe.com/people/Under+S. wrote
So for basic "just enough to show we bothered" animations (usually single-cycle, not repeating) we have 3 suggestions : animate.css, wow.js, and raw jquery.
Are all 3 more or less equivalent if my audience is a little more tech than the average (and less likely to still be using a 10 year old browser)?

I don't know about animate.css or wow.js as Ive never used them or found much use for animations myself personally. I find most of the effects a bit irritating and cheap. If I do introduce any kind of subtle effects like fading out a submitted form and fading in a feedback response or fading in a row of images, one after the other, I tend to use jquery because thats what I find easiest writing and getting to work. Whether or not it could handle the more bouncy, tippy, rotaty type of animation effects I dont know, probably but I dont really have a necessity to find out.

Report · Apr 11, 2017

First, i would not recommend doing this, but if you must, look at using css transitions for the opacity of the element. This can be combined with css animations for more control.

Now why i think it is a bad idea -

The effect may or may not be welcomed by users. This is because some users like a visual indication that the page is loading and rendering, which a normal page load achives.
If you get the timing wrong the element will fade-in after the rest of the page has displayed.
If you don't want to annoy repeat visitors, you will have to set a cookie to prevent the effect repeating.
If you set a cookie these days, you have to have a cookie policy, and let the user decide if they accept you doing so.

Look at the example given in the 1st answer at -

http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load

Report · Apr 11, 2017

<If you set a cookie these days, you have to have a cookie policy,>

You need a policy regardless of whether or not you use cookies.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 11, 2017

We're told that not many do subtle better than us 🙂 Have a look at our home page:

Responsive Web Design Extensions, Apps, Add-ons and Plugins for Dreamweaver

Please note that we sell add-ons for Dreamweaver. Many on this forum think it's a waste of money, though we've been doing it for 20 years... longer than any other extension developer. Our tools are efficient, our support second to none, and we have over 40,000 customers. Our code is custom-programmed. We never use anyone else's free frameworks or libraries because we believe that the best way to program is to... PROGRAM

This post may or may not make it past Adobe's guard dogs, but if it does, we hope our site provides some inspiration, whether you purchase something or not. This forum is pretty-much dead so we are not trying to market ourselves here as it has very little marketing value. We've been doing Dreamweaver far longer than Adobe has.

Report · Apr 11, 2017

because we believe that the best way to program is to... PROGRAM

Is not that telling people that the only way they wiil really learn how to build a web site, is to code it yourself?

Report · Apr 11, 2017

Is not that telling people that the only way they will really learn how to build a web site, is to code it yourself?

Absolutely. Using jQuery and Bootstrap teaches you nothing about scripting and if you ever learn how Bootstrap works, you know how to write CSS and would never use anything as bloated as Bootstrap. The obvious conclusion for anyone without a "thing" against extensions is that we provide an automated tool, which uses far more efficient CSS and script than BS (love that acronym) and jQuery. Our scripts are the type a novice can actually use as a learning tool because each of our scripts is specialized. The more dodgy and bloated user-posted examples I see on this forum, the more it makes me smile, because they are our future customers.

If snarky was your goal, you could have done much better

Report · Apr 11, 2017

ALsp wrote
If snarky was your goal, you could have done much better

You're the master of snarky, so you should know all about that. I guess that's what happens when you lose market share to cheaper products (free) which do an equally good job.

Report · Apr 11, 2017

You're the master of snarky, so you should know all about that. I guess that's what happens when you lose market share to cheaper products (free) which do an equally good job.

I didn't know you were privy to our books. So, perhaps we have another master here... the master of lies to support rudeness. You seem to do well. And there is a difference between sarcasm and rudeness. But you know that. Perhaps you should post a portion of your work so folks can see what a fabulous web designer you are. And I'm not trying to catch you as a poseur. I'm simply trying to understand why you are so rude and hurtful.

Report · Apr 11, 2017

I was not being snarky AL, and you should know me better than that

Report · Apr 11, 2017

I was not being snarky AL, and you should know me better than that

Of course, I do. My smiley's were from the heart. I took no offense at your post whatsoever, Paula. I can't say the same for Osgood's . That was downright rude and, of course, impossible to fact check, which makes it a bit irritating. This is why it's good that this forum is not in person. The casualty count would be mind-boggling .

Report · Apr 11, 2017

ALsp wrote
You're the master of snarky, so you should know all about that. I guess that's what happens when you lose market share to cheaper products (free) which do an equally good job.
I didn't know you were privy to our books. So, perhaps we have another master here... the master of lies to support rudeness. You seem to do well. And there is a difference between sarcasm and rudeness. But you know that. Perhaps you should post a portion of your work so folks can see what a fabulous web designer you are. And I'm not trying to catch you as a poseur. I'm simply trying to understand why you are so rude and hurtful.

Never mentioned ever that I was a fabulous web designer, far from it - I'm always humble in the fact I need to learn more and have always said so in many of my posts, unlike yourself, who comes across as a disengenuous bitter person these days.

Report · Apr 11, 2017

Never mentioned ever that I was a fabulous web designer, far from it - I'm always humble in the fact I need to learn more and have always said so in many of my posts, unlike yourself, who comes across as a disengenuous bitter person these days.

Good Lord, man. Have you checked a mirror lately? So you know my business and you know my personal feelings? You truly are a talented guy. Look, I'm sorry I caught you on a bad day. I'm closing the forum for the rest of the night so I can enjoy the customers on my forum, then I'll have dinner with my wife, and write a few chapters of my second novel. Yup.. I'm just a bitter, hopeless person.

Have a good evening, Osgood. I think you might really deserve it.

Report · Apr 11, 2017

ALsp wrote
Never mentioned ever that I was a fabulous web designer, far from it - I'm always humble in the fact I need to learn more and have always said so in many of my posts, unlike yourself, who comes across as a disengenuous bitter person these days.
Good Lord, man. Have you checked a mirror lately? So you know my business and you know my personal feelings? You truly are a talented guy. Look, I'm sorry I caught you on a bad day. I'm closing the forum for the rest of the night so I can enjoy the customers on my forum, then I'll have dinner with my wife, and write a few chapters of my second novel. Yup.. I'm just a bitter, hopeless person.
Have a good evening, Osgood. I think you might really deserve it.

You just proved a point and made a fool of yourself. Well done, have a great evening yourself Al.

As for enjoying the customers on your forum that shouldn't take long.

Report · Apr 12, 2017

OK, well this has gone completely off the tracks.

I think it's about as played out as it's going to be.

I'm locking her down.

Report · Apr 11, 2017

Just as an update, the link i supplied has answers that are over 5 years old, and browser compatibility is no longer a problem.

css animations work in all modern browsers.