tytbone Posted July 14, 2014 Share Posted July 14, 2014 (edited) EDIT2: Solved it - http://www.webdeveloper.com/forum/showthread.php?298019-newbie-trying-to-use-animo-js-to-quot-stagger-quot-animations-make-images-appear&p=1346067#post1346067 EDIT: I tried explaining the issue here, too - http://www.webdeveloper.com/forum/showthread.php?298019-newbie-trying-to-use-animo-js-to-quot-stagger-quot-animations-make-images-appear - and included a GIF of the issue - http://i.imgur.com/yyv3Fg7.gif I discovered http://labs.bigroomstudios.com/libraries/animo-js which seems to be a pretty cool animation library. I'm able to animate two images, one right after the other, both using "bounceInDown", but what I am trying to accomplish is not having the second image visible until it's animation occurs. (So it looks like both drop down from above the visible window) Right now, while the first image animates, the second one stays static until it's div is called to be animated, then it disappears and falls back down to its original spot. (The same issue actually occurs with the animo.js example, Bounce in left followed by Bounce in right, in the link provided above.) Should I try to make use of a Timing Event to keep the second image "invisible" until its animation occurs so it too looks like it simply falls down like the first image, or perhaps instead of nesting the second function have it separate but only run once the first animation is done? Any ideas from the pros here? Thanks as always. HTML: <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="style.css"></head><body><img id="cheese4" src="images/cheese.jpg"><img id="cheese5" src="images/cheese.jpg"></body> CSS: #cheese4 { display: block; margin-left: 25%; margin-right: 50%;}#cheese5{ display:block; margin-left: 50%; margin-right: 75%;} Javascript (that calls the functions/animations): $(document).ready(function() { $('#cheese4').animo( {animation: 'bounceInDown', duration:1}, function() { $('#cheese5').animo( {animation: 'bounceInDown', duration:1}); });}); Edited July 15, 2014 by tytbone Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now