Syncing Edge Animate with Window Scroll

This post is more than 2 years old.

Recently I've come across a few sites that will tie window scrolling with animation. When used in a subtle, small fashion, this is kind of cool. When used to change large portions of the view or really screw with scrolling, I detect it. Like most things, it all comes down to how you use it I suppose. But I was thinking recently - how can we do this with Edge Animate? Turns out it is rather simple.

I began by creating a simple animation of a box moving from left to right. That is - unfortunately - the best I can design. Don't blame Edge Animate. Blame me. Next, I disabled autoplay for the animation. If you can't find this, be sure the Stage is selected and uncheck the box.

With autoplay turned off, I then figured out what I needed to do to tie scrolling to animation.

  • First, I need to ensure the animation stays visible.
  • Second, I need to detect a scroll event.
  • Third, I then need to figure out how much the person has scrolled against the total amount they can scroll. Basically, what percentage?
  • Finally, I need to set the animation's current position to that percentage.

Let's break this down. I began by working in the animation's creationComplete event. I added an onscroll event first.

window.onscroll = function(e) {
    var perc = getScrollPerc();
    var animPos = (perc/100) * animSize;
    sym.stop(animPos);
}

So, the first thing I do is get the scrolled percentage. That comes from this function:

//scroll perc - http://www.sitepoint.com/jquery-capture-vertical-scroll-percentage/
	  function getScrollPerc() {
		var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
		return (wintop/(docheight-winheight))*100;
	  }

Thankfully Sam Deering had figured this out for me already and posted it here. Next, I figured out where I was, percentage wise, in my animation's timeline. The value animSize is simply the size (timewise) of my animation:

var animSize = sym.getDuration();

Finally, that last line is what moves the animation to a specific point. I was stuck on this for a while as the JavaScript API for Edge Animate does not specifically call out how to do this. My coworker Elaine Finnell pointed out that the stop() method lets you move to a particular position. This is documented but I had not even considered looking at stop() as an option!

This worked great, but I wanted to add one more thing. If I had scrolled down a bit on my test page and reloaded, I wanted the application to recognize this on load and animate accordingly. I added some code to run immediately on load:

//handle initial scroll
if(getScrollPerc() > 0) {
	  console.log('do initial move');
	  var perc = getScrollPerc();
 	  var animPos = (perc/100) * animSize;
	  //timeout is from bugs with the DOM not being 100% ready
	  setTimeout(function() { sym.stop(animPos);}, 0);
}

Basically this is a repeat of my other code, which is kinda bad, but notice the setTimeout. Edge Animate has a bug - or quirk - with working with the DOM in creationComplete. I've run into this before and setTimeout, while lame, works around it. Here is my creationComplete code then as a whole.

(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
      
      //scroll perc - http://www.sitepoint.com/jquery-capture-vertical-scroll-percentage/
	  function getScrollPerc() {
		var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
		return (wintop/(docheight-winheight))*100;
	  }
	  	   
      Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
		  
		  var animSize = sym.getDuration();

		  //handle initial scroll
		  if(getScrollPerc() > 0) {
			  console.log('do initial move');
			  var perc = getScrollPerc();
 			  var animPos = (perc/100) * animSize;
			  //timeout is from bugs with the DOM not being 100% ready
			  setTimeout(function() { sym.stop(animPos);}, 0);
		  }
		  
		  window.onscroll = function(e) {
			  var perc = getScrollPerc();
 			  var animPos = (perc/100) * animSize;
			  sym.stop(animPos);
		  }
		  

      });
      //Edge binding end

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

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

And it works awesome! Well, to me anyway. Check it out here: https://static.raymondcamden.com/demos/2014/sep/29/stickandscroll/Untitled-2.html.

Of course, that's my ugly version. Imagine if someone with some decent design skills tried it. Elaine did so - and with help from other Adobians (Max Vujovic and Bem Jones-Bey) came up with this much cooler version: https://static.raymondcamden.com/demos/2014/sep/29/elainesample/scroll.html. Check it out!

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 Goy J- posted on 9/30/2014 at 2:25 PM

Excellent post. Thank you a lot!

Comment 2 by Andy posted on 9/30/2014 at 4:53 PM

I expanded a bit on this premise earlier this year:
http://aphall.com/demo/edge...

Source is linked at the end. I think Animate has been updated since then, but it should still work. ;)

Comment 3 by Raymond Camden posted on 9/30/2014 at 5:00 PM

Very cool Andy - sorry I didn't see this before.

Comment 4 by Andy posted on 9/30/2014 at 6:59 PM

Haha, I should have sent it to you! :D

Comment 5 by Goy J- posted on 9/30/2014 at 9:30 PM

As a former flash user, I really have big hopes for Edge Animate.
But jQuery is so much away from my knowledge of AS2.0.
You guys are pushing me to dig more into that.
Thank you.

Comment 6 by kishan posted on 4/3/2015 at 8:00 PM

the code is not working for me..could u help me please ?

Comment 7 (In reply to #6) by Raymond Camden posted on 4/3/2015 at 8:02 PM

Can you explain how it isn't working?

Comment 8 (In reply to #7) by kishan posted on 4/5/2015 at 5:37 PM

I want to sync my animation timeline with vertical scrolling. Here is link to the assignment I have been working on https://drive.google.com/fi...

Comment 9 (In reply to #8) by Raymond Camden posted on 4/6/2015 at 1:20 PM

And? Are you asking a question?

Comment 10 (In reply to #9) by kishan posted on 4/7/2015 at 9:30 AM

yes ..i added your code to the composition but couldnt get it working. I am a beginner with edge animate. Any help would appreciated

Comment 11 (In reply to #10) by kishan posted on 4/7/2015 at 9:37 AM

Basically I want my animation to play as I scroll vertically.. That is what I want to achieve

Comment 12 (In reply to #10) by Raymond Camden posted on 4/7/2015 at 1:04 PM

How does it fail? Try using your browser dev tools to diagnose the error.

Comment 13 by keep smiling posted on 5/12/2015 at 1:15 PM

thank you , but the Example link isn't working :( .

Comment 14 (In reply to #13) by Raymond Camden posted on 5/12/2015 at 2:44 PM

Fixed.

Comment 15 by Adam Jacques posted on 6/1/2015 at 4:13 PM

HI Raymond, Great tutorial,

I am a Flash dev, not too used to jQuery so struggling to get to grips with this one,

I am creating a display banner that scrolls with the webpage it's hosted on,
the content is taller than the viewport, and reveals as the parent webpage scrolls.
So this is perfect, just can't get it working!

Could you specify where the code is placed? Screenshots of 'Full Code' in Edge would be a massive help, as I have compared my Full Code to the final Full Code at the end of your tut, but no luck.

Also could you reiterate where the stop(); functions are used within your timeline?

Hope you can help! Thanks in advance,

Adam.

Comment 16 (In reply to #15) by Raymond Camden posted on 6/2/2015 at 2:46 PM

I'm sorry, but I no longer have Edge Animate installed. I don't work for Adobe anymore so I don't have access to Creative Cloud unless I pay for it, and as I don't really do animations in my day to day job, it isn't something I'm going to pay out of my own pocket. Again - I'm sorry.