Delaying an Edge Animate asset until visible - Part 6

This post is more than 2 years old.

Welcome back to the thread that won't die. I've blogged (see related links below) about this topic six times now. It started off as something simple - making an Edge Animate animation wait to run until visible - but it has turned into a pretty complex set of entries discussing not only how to do it but alternatives and other modifications. Today's entry is rather simple though as it just covers updates for the October 2014 release of Edge Animate.

Reader @jdesi posted a comment this morning about an issue he was having with my code in the latest release of Edge Animate. (You can read details about that update here: Edge Animate reduces runtime size by 55%, "Save to Custom Folders" feature, new Preloader options, and more!) I did some digging and discovered a few different issues with my code.

Before I go any further, please note that I worked on a modified form of the first demo I built for this feature. My later entries in this thread made the behavior a bit more complex. I'm assuming people can apply the updates I describe below to those versions as well.

The first thing I discovered is that jQuery is no longer included by default in the HTML template. This is discussed in the blog entry I linked to above and while I could have certainly worked around needing jQuery, it was simpler to just add it back in. I did so in the index.html file and included it before the Edge JavaScript include.

The next thing I noticed was that sym.element wasn't available. I checked the (updated) JavaScript API and saw that a new API existed: sym.getSymbolElement

The next change was a bit more subtle (but still documented!) - the element will now be wrapped in jQuery, if you have included it. From the docs:

"Note: If you have added jQuery as an external dependency in the Edge Composition, then sym.getSymbolElement() will return a jQuery wrapper, as AdobeEdge.$ gets redefined to jQuery in such cases. You can use any of the jQuery APIs on the result in this case."

So with that being the case, the method I wrote to check if the element was in view was able to remove the $ wrappers. Here is the updated version of the code.

      Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

		function isScrolledIntoView(elem) {
			var docViewTop = $(window).scrollTop();
			var docViewBottom = docViewTop + $(window).height();

			var elemTop = elem.offset().top;
			var elemBottom = elemTop + elem.height();
		
			return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
			  && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
		}		  

		var element = sym.getSymbolElement();
		if(isScrolledIntoView(element)) {
			sym.play(0) 
		} else {
			$(window).on("scroll", function(e) {
				if(isScrolledIntoView(element)) {
					console.log('Start me up');	
					sym.play(0);
					$(window).off("scroll");
				}
			});
			
		}
		  
		  
      });

You can test this version here: http://www.raymondcamden.com/demos/2014/oct/14/test.html. As a reminder, this one won't pause if you scroll out and won't restart if you scroll back in. That's covered by later versions of my demo and can be used if you simply apply the fixes described here to them. Enjoy!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by jdesi posted on 10/15/2014 at 2:35 AM

Thanks a lot - tested and works like a charm :))

Comment 2 by Benedikt posted on 2/11/2015 at 4:44 PM

Hi Raymond,

thank you for sharing your code!

Unfortunately the code does not work with my animation.

When I look into the console, I see an error message:
[Log] Javascript error in event handler! Event Type = symbol (edge.5.0.1.min.js, line 154)

Unfortunately I don't know where 'symbol' is called.

I had this problem with the same message with an erlier version of your code and you directed me to this one because of compatibility reasons with the newer version of Edge Animate. It looks as there are some more issues with my version of Edge Animate (2014.1.1).

The code I use is (it's the only code I wrote in the animation):

--------------------------------

/***********************

* Adobe Edge Animate-Aktionen für Composition

*

* Bearbeiten Sie diese Datei mit Vorsicht. Achten Sie darauf, dass

* Funktionssignaturen und Kommentare, die mit „Edge“ anfangen, beibehalten werden,

* damit Sie mit diesen Aktionen weiterhin in Adobe Edge Animate interagieren können.

*

***********************/

(function($, Edge, compId){

var Composition = Edge.Composition, Symbol = Edge.Symbol; // Aliase für häufig verwendete Edge-Klassen

//Edge symbol: 'stage'

(function(symbolName) {

Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

function isScrolledIntoView(elem) {

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height();

var elemTop = elem.offset().top;

var elemBottom = elemTop + elem.height();

return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)

&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );

}

var element = sym.getSymbolElement();

if(isScrolledIntoView(element)) {

sym.play(0)

} else {

$(window).on("scroll", function(e) {

if(isScrolledIntoView(element)) {

console.log('Start me up');

sym.play(0);

$(window).off("scroll");

}

});

}

});

//Edge binding end

})("stage");

//Edge symbol end:'stage'

})(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-7808737");

---------------------------------

Do you have any idea what to do?

Comment 3 (In reply to #2) by Raymond Camden posted on 2/11/2015 at 10:47 PM

Not immediately. I'd need to get the project, and I don't even have Edge Animate installed anymore. Best I can suggest is the Adobe forums.

Comment 4 by Robbie posted on 2/13/2015 at 8:45 PM

Thank you so much! I am an intern and am using this code for an animation to be used on a real estate site. They are very impressed, thanks again

Comment 5 by Niels posted on 3/4/2015 at 10:17 AM

great script! but how do i make this work from an iframe.. i'm trying with window.parent... but no succes yet..

Comment 6 (In reply to #5) by Raymond Camden posted on 3/4/2015 at 11:47 AM

Sorry - I don't have Creative Cloud anymore and don't even have Edge Animate installed now.

Comment 7 by David posted on 6/17/2015 at 3:07 AM

What is the trick to get this to work with multiple assets on one page? Please help!!!

Comment 8 (In reply to #7) by Raymond Camden posted on 6/17/2015 at 3:53 AM

Wish I could help - don't have CC anymore.

Comment 9 (In reply to #8) by David posted on 6/17/2015 at 4:04 AM

Can't point me in the right direction? Anything would help at all. I have it working great on one animation on the page. But when I add it to another animation everything dies.

Comment 10 (In reply to #9) by Raymond Camden posted on 6/17/2015 at 4:13 AM

I thought I had covered this already - so I'd check all 5 previous entries.

Comment 11 (In reply to #10) by David posted on 6/17/2015 at 4:17 AM

I did check all previous entries. I couldn't find the solution on any of them.

Comment 12 (In reply to #11) by Raymond Camden posted on 6/17/2015 at 4:26 AM

Hmm. Well best I can suggest is repeating the code for each element. I coulda sworn I had a blog entry on this, but I can't rebuild the demo as I don't have the software anymore. Lost CC when I left Adobe.

Comment 13 (In reply to #12) by David posted on 6/17/2015 at 4:29 AM

That's exactly what I did. I repeated the code for each one. But when you add each animation to the page you have to change the ID so they all don't say "Stage". Do you think that has something to do with it?

Comment 14 (In reply to #13) by Raymond Camden posted on 6/17/2015 at 4:31 AM

yeah - you would need to ensure the IDs match

Comment 15 (In reply to #14) by David posted on 6/17/2015 at 4:38 AM

Match where? In the script? On the page in the DIVs?

Comment 16 (In reply to #15) by Raymond Camden posted on 6/17/2015 at 4:49 AM

Both would need to match.

Comment 17 (In reply to #16) by David posted on 6/17/2015 at 3:29 PM

We got it working! Here is the code we used...

var isScrolledIntoView = function(elem){
var docViewTop=$(window).scrollTop();
var docViewBottom=docViewTop+$(window).height();
var elemTop=elem.offset().top;
var elemBottom=elemTop+elem.height();
return((elemBottom>=docViewTop)&&
(elemTop<=docViewBottom)&&
(elemBottom<=docViewBottom)&&
(elemTop>=docViewTop));
};
var element=sym.getSymbolElement();
if(isScrolledIntoView(element)){
sym.play(0)
}else{
var handler;
handler=function(e){
if(isScrolledIntoView(element)){
console.log('Start me up');
sym.play(0);
$(window).off("scroll",handler);
}
};
$(window).on("scroll",handler);
}

Comment 18 (In reply to #17) by David posted on 6/17/2015 at 3:30 PM

We have an Infographic with 13 animations on it. I will post the link when it goes live. Good stuff!

Comment 19 (In reply to #18) by Raymond Camden posted on 6/17/2015 at 5:09 PM

Glad you got it. :) Sorry I couldn't help more.

Comment 20 (In reply to #17) by Robert fikes posted on 8/11/2015 at 6:21 PM

Where would you put this code to make it work? In the AE File? A seperate js file? Would you need to make sperate ID's?

Comment 21 (In reply to #20) by Raymond Camden posted on 8/11/2015 at 9:34 PM

I'd check the earlier posts as I talk about how to get the JS file. Specifically check part 1.

Comment 22 (In reply to #2) by Peter Mumford posted on 10/6/2015 at 7:20 PM

I was getting the same error. It was caused by not loading jquery.

Comment 23 (In reply to #18) by Robbie posted on 11/2/2015 at 1:21 AM

I'd like to see the infographic. I'm still having trouble getting them to load
properly with your code. Only the first composition loads with the scrolledintoview code. https://forums.adobe.com/th...

Comment 24 (In reply to #23) by David posted on 11/2/2015 at 1:29 AM
Comment 25 (In reply to #24) by Robbie posted on 11/2/2015 at 10:51 PM

Awesome work! Would it be too much to ask for the files so I can dissect the code and apply it for a school project?

Comment 26 (In reply to #24) by Robbie posted on 11/2/2015 at 10:56 PM

Mainly its because I can't figure out why it's not working "Javascript error in event handler! Event Type = symbol"
https://www.dropbox.com/s/m...

Comment 27 (In reply to #25) by Raymond Camden posted on 11/2/2015 at 10:58 PM

Best I can suggest is view source and save, it's all online. Unfortunately, you aren't the first person to report this error, so I think something changed in the Edge Animate product. I no longer have this product so I can't help fix it.

Comment 28 (In reply to #23) by Robbie posted on 11/3/2015 at 1:37 AM

I've re-written the code but am getting an error when mutiple comps are added. Seperately they work fine. I've posted the issue here https://forums.adobe.com/me...

Comment 29 (In reply to #27) by Robbie posted on 11/3/2015 at 6:36 PM

Its all good, I solved it https://forums.adobe.com/me...

Hopefully this will come in handy to anyone else trying to achieve this effect. (for future people trying to contact me for help, message me on the forum)