Skip to main content
U
Under S.
Inspiring
April 11, 2017
Question

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

  • April 11, 2017
  • 7 replies
  • 2743 views

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?)

    This topic has been closed for replies.

    7 replies

    pziecina
    pziecina
    Legend
    April 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.

    ALsp
    ALsp
    Legend
    April 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.

    pziecina
    pziecina
    Legend
    April 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?

    ALsp
    ALsp
    Legend
    April 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

    pziecina
    pziecina
    Legend
    April 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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 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
    U
    Under S.Author
    Inspiring
    April 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)?

    O
    osgood_
    Legend
    April 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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 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
    O
    osgood_
    Legend
    April 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>

    <meta charset="UTF-8" />

    <title>Fade In Containers</title>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(document).ready(function(){

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

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

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

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

    });

    });                      

    });

    </script>

    </head>

    <body>

    <div class="one">

    <h1>One</h1>

    </div>

    <div class="two">

    <h1>Two</h1>

    </div>

    <div class="three">

    <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.

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    April 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. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices