Over a million developers have joined DZone.

Delaying an Edge Animate Asset Until Visible: Part 3

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Surprisingly, my blog posts (see the Related Entries section below) on Edge Animate and delaying animations were much more popular than I thought. In the comments section folks came up with some interesting questions and discussions about the techniques I presented. One of them was rather fascinating and, like all good questions, led to some interesting code.

A reader had created a vertically large animation. The animation was more than large enough to require scrolling to see the entire thing. What he wanted to then was to have internal items, i.e. animations inside the core animation, that would delay their animation until visible.

In order to demo this, I created a new Edge Animate animation and edited the stage to be very large vertically. I then created a symbol and defined an animation on the symbol itself. Lastly, I set the auto-play to false.

So ... now came the interesting part. I assumed I could do something similar to my previous entries: Wait for the element to be visible and then start the animation.

I began by working with the creationComplete event. I should point out that symbols have their own events as well. I'm not convinced I know what's best to use here. I assumed that the creationComplete on the stage made the most sense, since to me it meant that everything was ready. I then wrote code to get my symbol and used the same logic as before:

     Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
		  
          console.log("Ready");
          mysym=sym.getSymbol("Symbol_12");
		  
		  if(isScrolledIntoView(mysym.element)) {
			  mysym.play(0) 
		  } else {
			  $(window).on("scroll", function(e) {
				  if(isScrolledIntoView(mysym.element)) {
					  console.log('Start me up');	
					  mysym.play(0);
					  $(window).off("scroll");
				  }
			  });
		  }

      });

Pardon the somewhat wonky spacing there. If you read the previous entries then you know isScrolledIntoView is a utility function I included to see if the DOM item was visible.

Here is where things broke down. My item was being reported as always in view, even when it certainly was not! I added some logging, and discovered that when the web page loaded, my symbol had a "page x" and "page y" of "0,0"!

And then things got crazy. For the heck of it, I added a setTimeout call for one second. When I did that and reported the position of my symbol, it was correct.

What. The. Heck. (And that's not what I said. ;) )

Luckily I've got friends in high places. I spoke a bit with Josh Hatwich, a principal scientist on the Edge Animate team, and he suggested checking the display property of the symbol. When I did that, I found that my symbol had a display value of none initially, and then block in my setTimeout. This is why the positioning was so screwy.

What he recommended then was a simple fix: Force the display property on the item and then check if it is visible. Here is the version I went with (there is only one line different):

     Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
		  
          console.log("Ready");
          mysym=sym.getSymbol("Symbol_12");
          //force it to be block  
          mysym.element.css("display","block");
		  
		  if(isScrolledIntoView(mysym.element)) {
			  mysym.play(0) 
		  } else {
			  $(window).on("scroll", function(e) {
				  if(isScrolledIntoView(mysym.element)) {
					  console.log('Start me up');	
					  mysym.play(0);
					  $(window).off("scroll");
				  }
			  });
		  }

      });

And this works. (There is a demo link at the bottom.) Speaking more with Josh, he agreed that this use case may need some additional help from the JS API to work better in the future. So please note that what you see here may be better handled in a future EA update. I've included a .zip of my code, but know that the .an file is not working correctly. I'm looking into that as well.

When you view this demo, you'll see a very tall pink box. In theory, you will not see a yellow box. When you scroll down and you see it, it should begin to move to the right. Please be sure you are sitting. My design skills are so incredible you may fall to the ground and I do not wish to be the cause of any physical damage.

Related Blog Entries


Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}