www.webdeveloper.com
Results 1 to 2 of 2

Thread: newbie - trying to use animo.js to "stagger" animations, make images appear

  1. #1
    Join Date
    Jul 2014
    Posts
    2

    Question newbie - trying to use animo.js to "stagger" animations, make images appear

    Hey all, apologies if my posts come across as incompetent; I enjoy trying to figure out programming but my degree is in graphic design/art, so logic like this doesn't come easy to me. (My experience up until now has basically been reading through w3schools.)

    I'm trying to make use of this neat Javascript animation library, http://labs.bigroomstudios.com/libraries/animo-js. I like the "bounceInDown" effect, and am trying to do something similar to the example "Bounce in left followed by Bounce in right".

    Code:
    $('#demo3').animo( { animation: 'bounceInLeft', duration: 1 }, function() {
    	$('#demo4').animo( { animation: 'bounceInRight', duration: 2 } );
    });
    is very close to what I want, but the problem is the second image (in this case "demo4") is visible first before its animation occurs. As the first animation plays, the second image is situated where it is suppose to end up; it is visible until it "pops away" to play that second animation, then it moves back to where I do want it.

    Here's a gif of the animation and problem - http://i.imgur.com/yyv3Fg7.gif - hopefully that helps clarify the issue. Basically I don't want that second cheese to be visible until it drops in. How would people recommend accomplishing this? I've tried doing a few different things, like making use of a Timer Event and Visibility property, but I couldn't get that to be recognized, so the code I'm going to post is just what you see in the .gif. (It's possible I was using them wrongly, since I've never tried to use them before.)

    Help would certainly be appreciated. Thanks in advance.

    HTML:
    Code:
    <head>
        <script src="jquery-2.1.1.js"></script>
    	<script src="animo/animo.js" type="text/javascript"></script>
    	<script src="portfolio-animo.js" type="text/javascript"></script>
    	<link rel="stylesheet" type="text/css" href="animo/animate+animo.css">
    	<link rel="stylesheet" type="text/css" href="animate.css">
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body> 
    
    <img id="cheese4" src="images/cheese.jpg">
    <img id="cheese5" src="images/cheese.jpg">
    
    </body>
    CSS:
    Code:
    #cheese4 {
    	display: block;
    	margin-left: 25%;
    	margin-right: 50%;
    }
    
    #cheese5{
    	display:block;
    	margin-left: 50%;
    	margin-right: 75%;
    }
    JS:
    Code:
    $(document).ready(function() {
        $('#cheese4').animo({animation: 'bounceInDown', duration:1}, function() {
    	    $('#cheese5').animo({animation: 'bounceInDown', duration:1});
    	});
    });

  2. #2
    Join Date
    Jul 2014
    Posts
    2
    (I guess there isn't an option to edit posts or mark them as "solved"?)

    Alright, I solved the problem with a simple
    "visibility: hidden;"
    in the CSS file and then
    "$('#cheese5').css("visibility", "visible");"
    when the function runs.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles