Goal:
Create multiple Edge animations, which animate out to reveal another independent Edge animation behind it. Repeat as many times as desired, in a storyboard fashion. All animations will sit in a single HTML page, and javascript will load and play new animations when necessary.
Unsolved Problem:
After getting this to work for 2-3 animations, it locks up and nothing works again. This appears to happen when edge.1.0.0.min.js loads, after edge.1.5.0.min.js had been used for the first two animations. I can see the file load in the web inspector, where it hadn't existed for the first two animations. This may or may not be related.
Key Players:
Hide / Show Divs: document.getElementById('div_container').style.display = 'none';
Play new animations: AdobeEdge.getComposition("myAnimation").getStage().play(0);
HTML Structure:
- HTML5 doctype
- head.min.js loaded, which helps with loading new animations on demand
- .edgeLoad-homepage { visibility:hidden; } for each animation anticipated
- <div class="container"> A main container for all of the animations
- <div id="homepage_cont" style="z-index:9;" class="container2"> A sub-container for each animation
- <div id="homepage" class="homepage"></div> for each animation anticipated
- <script>head.js("homepage_edgePreload.js");</script> head.js loads the javascript for each animation, on-demand
Problem: Must get multiple animations on top of each other, via HTML & CSS.
Solution: Check out the HTML structure linked to above. This required creating a primary container for all animations, then additional containers for each animation. Applying CSS to edge animation div's directly DOES NOT WORK, which is why additional containers are necessary.
Example:
Style:
<style>
.container
{
height:700px;
width: 1200px;
position:relative;
margin:0 auto;
}
.container2
{
height:700px;
width: 1200px;
position:absolute;
left:0px;
top:0px;
}
</style>
HTML:
<div class="container">
<div id="preppydate_cont" style="display:none; z-index:1;" class="container2"><div id="preppydate" class="preppydate"></div></div>
Problem: Can't load all animations up front, waaaay to many browser resources.
Solution: Include the skeleton for where animations will go (the HTML), and load javascript when necessary via head.js.
Example:
In head: <script type="text/javascript" charset="utf-8" src="head.min.js"></script>
In HTML body: <script>head.js("homepage_edgePreload.js");</script>
In Adobe Edge animations, when getting ready for the next: head.js("nextAnimation_edgePreload.js");
Problem: First animation loads, animates out into the one behind it, can't click anything on new animation.
Solution: The container for the top animation still exists. In the timeline of the first animation, hide its container (which you created, myAnimation_cont).
Example:
On the Edge timeline, towards the end: document.getElementById('homepage_cont').style.display = 'none';
Problem: When new animation is loaded, it starts before the previous animation is finsihed.
Solution: In Edge, pause the new animation on the first frame. Then, on the previous animation's timeline, at the end, play the new one.
Example:
On the exiting animation: AdobeEdge.getComposition("myNewAnimation").getStage().play(0);
Please ask for any clarification, and reply back if you can offer any help! I've solved a lot of issues but it seems the more I solve the more there are hiding. Has anybody accomplished this in a simpler way? Has anybody done this at all? It's simiar to the Adobe Edge Bootstrap post, but more complicated in that you can't hide the prior div until you've already animated into the new one. That is, you have two div's concurrently existing, which is not how the post did it.