Twitter: raymondcamden


Address: Lafayette, LA, USA

Delaying an Edge Animate asset until visible - Part 4

12-06-2013 5,568 views Design, JavaScript, HTML5 27 Comments

Welcome to the final blog post on delaying Edge Animate animations. I'm saying final just because I can't believe how such a simple thing has turned into so many different blog posts, so many different variations, and so many different fun diversions. Most likely because I said this will be the final post, someone will discover some other interesting opportunity and I'll have to write a part 5. But hey - that's the fun part about being a developer, right? Before we start though, please be sure you've read the earlier posts. I'll link to them at the bottom.

I had an interesting discussion with Felix in the comments on my second blog entry on this topic. He discovered an interesting bug. If the animation was scrolled into view, it would play. If the animation completed, and you scrolled it a bit, but just a tiny bit so it never left the view, it would start over.

The issue was simple. My code didn't know that the asset had stayed visible during the scroll event. To fix this, I simply keep track of the asset becoming visible.

/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
      
      
      Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
         // insert code to be run when the symbol is created here
		var wasHidden = true;

		//http://stackoverflow.com/a/488073/52160
		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) );
		}		  
		
		//Immedidately see if visible
		if(isScrolledIntoView(sym.element)) {
			console.log('on load vis');
			wasHidden=false;
			sym.play();
		}
		  
		function doStart() {
            if(isScrolledIntoView(sym.element)) {
				if(wasHidden) {
					console.log('Start me up');	
					sym.play();
				}
				wasHidden = false;
            } else {
                console.log('stop');
                sym.stop();
				wasHidden = true;
            }
            
		}
		  
        $(window).on("scroll", doStart);
        

      });
      //Edge binding end

      Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) {
         //sym.play("Loop")

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'

})(jQuery, AdobeEdge, "EDGE-62515662");

If you've read the other posts then most of this should make sense already. To see this in action try the demo below.

Related Blog Entries

27 Comments

  • jerzero #
    Commented on 01-16-2014 at 7:22 PM
    Hi raymond -

    thanks again for sharing this information.

    what if the animation resets everytime its not visible and will start from zero again when visible.

    Im trying to avoid the animation to continously play.
  • Commented on 01-16-2014 at 8:25 PM
    Are you saying you want it to reset?
  • jerzero #
    Commented on 01-17-2014 at 1:58 PM
    yes, something like this:
    http://www.cupsannual.ca/

    the animation resets.

    what code should i change to reset the animation if it went back hidden.

    thank you
  • Commented on 01-17-2014 at 2:07 PM
    Err, so to be clear, when it comes back from hidden you want it to start at time 0? If you change play() to play(0), it should do that.
  • jerzero #
    Commented on 01-17-2014 at 2:32 PM
    Yes , thanks Raymond! i will try that and will let you know, thanks again =)
  • Ernesto #
    Commented on 02-09-2014 at 1:52 PM
    Thanks for your work.

    As i see, the code doesn´t work when I embed the animation using "insert the oam" method on dreamweaver. Is there something i can do to make it work ?
    I works perfectly when I embed it as usually, but inserting via dreamweaver is so easy and fast...

    Thanks in advance and sorry for my english.
  • Commented on 02-09-2014 at 2:24 PM
    No idea. I've never embedded via DW. If the same code works when you embed it normally, best I can suggest is that it is a bug with DW and you should avoid embedding it that way. You should be able to use DW just fine outside of that.
  • Anthony Butterfield #
    Commented on 03-03-2014 at 1:46 PM
    Hi Raymond,
    Any chance i can get hold of the source files for the example in this last post?
    Thanks You
    Anthony
  • Commented on 03-04-2014 at 8:06 AM
    Here ya go: https://dl.dropboxusercontent.com/u/88185/4.zip
  • Heather #
    Commented on 03-23-2014 at 6:07 PM
    Hey Raymond,

    I've read through your 4 tutorials on delaying Edge animations and have pasted your js code from the 4th tutorial into my animation's _edgeActions.js file. It works great on desktop and laptops but when I test it on tablets and mobile devices the animation doesn't appear at all.

    I thought that the poster image would at least appear if the animation was viewed on a device that doesn't support an Edge animation but all I get is a bank white space.

    I was hoping you might have come accross this issue before and have a solve for it.

    Thanks!
  • Commented on 03-23-2014 at 8:28 PM
    I'd recommend testing without my code and see if it works. It sounds like you are having multiple issues and you should start w/ a simple test case first.
  • Heather #
    Commented on 03-23-2014 at 8:44 PM
    Hey Raymond,

    I did test the animation without your code and it worked fine with out the delay code. Since the animation I'm working with is not a looping animation and it pretty short (33seconds) it ends before the user scrolls to where the animation is within the viewport.

    To make sure that it wasn't something I did when I added the code or when I created the animation I tried testing your animation from tutorial 4 on an iphone. When I use Safari on an iphone 4 to navigate to this page and click on the demo CTA the animation on the demo page does not animate.

    Is it not possible to have an Edge animation with a delay play on iOS? I've scorwered the internet to see if Adobe or anyone else has come across this but haven't had any luck.

    Thank you again for your help.
  • Commented on 03-23-2014 at 9:00 PM
    Hmm. So to be clear, with my code it worked ok outside of iOS? Can you share the URL so we can all see? I'd try using Safari Remote Debugging to see if something shows up.
  • Heather #
    Commented on 03-23-2014 at 10:06 PM
    Hey Raymond,

    You are correct. When I added your code it works fine when I tested it in Chrome, Firefox and Safari on both my desktop and 2 different laptops. It stopped working when I viewed my website on an iphone and ipad.

    I'm unfamilar with Safari's Remote Debugging but I will look into it.

    Since I'm still in the process of designing my website I have a maintenance mode on. I will turn off the maintenance mode for the next few hours but will have to turn it back on by 12pm. The animation is in the about section.

    kenneydesigns.co

    Please let me know if you were not able to review the issue when the maintenance mode was turned off. Thanks again!
  • Heather #
    Commented on 03-24-2014 at 12:30 AM
    I ran the Safari Remote debugger and in the console view the following line appears:

    [Log] [ DEBUG | EdgeSuite | Info]: Other jQuery include exists: Version 1.7.1 (edge-wordpress.js, line 212)

    When I click on (edge-wordpress.js, line 212) it directs me to the following code:
    if(AdobeEdge.edgesuiteDebug){
    console.log('[ DEBUG | EdgeSuite | ' + level + ']: ' + msg);
    }

    The console.log line is line 212 and I am assuming that the issue is with the ('[ DEBUG | EdgeSuite | ' + level + ']: ' + msg) section since that area is highlighted blue when I review it.

    This is above my code knowledge and I'm hoping you might know a solve to correct this code so I can have the animation work on iOS devices.
  • Commented on 03-24-2014 at 6:52 AM
    I assume the animation is down now? I don't see it at kenneydesigns.co.
  • Heather Kenney #
    Commented on 03-24-2014 at 5:31 PM
    The animation is not down. It is located in the about section. The fist several seconds of the animation is set at 0% opacity and then elements starts to fade in to finish at 100% opacity.

    If you are viewing it on a desktop or laptop you should be able to view the animation as it was meant to animate. If you try viewing it on an iphone or ipad you will only see a white space where the animation should appear.

    I will turn off the maintenance mode for the rest of the afternoon but will need to turn it back on by the end of the day today.
  • Commented on 03-25-2014 at 5:59 AM
    When I go to kenneydesigns.co I get a maintenance message. You and I work different schedules. :) Maybe you can put it up in a temporary folder that you don't have to remove?
  • Heather Kenney #
    Commented on 03-25-2014 at 5:02 PM
    Hey Raymond,

    Yep, we do seem to work on opposite schedules. I took down the Maintenance Mode and will keep it down for the next few days. Hopefully this will give you enough time to take a look at it.

    The animation is in the about section. If you are using Safari's Remote Debugging tool then you will find the animation in a div, within the about section, called span 7.

    Thanks again for all your help.
  • Commented on 03-26-2014 at 9:27 AM
    Ok, so I went to the page. I see the console saying it start up, but I don't actually see anything animating. Oh wait - I do. It is just subtle. THe little triangle things move.

    It seems to be working for me.

    Oh crap - you said it DOES work desktop, just not mobile safari. Let me fire up my simulator. :)
  • Commented on 03-26-2014 at 9:36 AM
    So yeah - honestly I'm not sure. Obviously it is failing isScrolledIntoView. I debugged the function and see this.

    docViewTop is 436.
    docViewBottom is 896

    So this represents the 'window' we are looking at.

    elemTop is 631
    elemBottom is 1076

    This is the animation top and bottom. Subtracting, we see the animation is 445 tall. The window is 460. So in theory it should "fit". Digging.
  • Commented on 03-26-2014 at 9:52 AM
    Ok, I believe the issue is your responsive design and the top header thing.

    https://www.evernote.com/shard/s3/sh/f1c652ed-c6bd...

    I was able to get the animation to fire by VERY precisely getting it to fit - but since the animation is behind the top bar, you can't see it.
  • Heather Kenney #
    Commented on 03-26-2014 at 8:05 PM
    Hey Raymond,

    Thank you for looking into this issue. I assume that when the animation is below the header/top nav menu it should animate automatically. At this point it's looking like it's not even worth having the animation at all.

    I'll see if changing some of the CSS on the mobile nav will make the animation work. If that doesn't work then I give up.

    Thanks for your help.
  • AKall #
    Commented on 04-09-2014 at 11:57 AM
    Hello Raymond,
    I've gotten the isScrolledIntoView code to work wonderfully, but I had a question. Our animation doesn't fire until the /entire/ stage is in view, which is a problem because it just looks like a large white space. We are afraid the user won't continue to scroll and trigger the animation.

    Is there a way to trigger the animation once the top of the stage is visible, instead once the entire thing is in view?
  • Commented on 04-09-2014 at 2:38 PM
    In theory just mod the logic - right now it is checking the top and bottom. You could modify it to just ensure the top is in sight.
  • Demian #
    Commented on 04-12-2014 at 6:00 AM
    Hello,

    Thanks for your script.
    I am trying to make it work but i think i'm missing on something. I'm a beginner to muse and EDGE. I am trying to import an Edge animation to a parallax website made with Muse.
    So i would like to the export the animation in a OAM format. Can i do this with your script?
    Thanks
  • Demian #
    Commented on 04-12-2014 at 6:27 AM
    Nevermind, i got it.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty