Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animating a Javascript Variable

Recommended Posts

Right off the bat, the JS TweenMax is picking up where they left off in Flash. Digging it. I demoed out EaselJS and KineticJS. Not sure if you need a framework, but a good animation engine and some basic prototype Javascript Objects, and I"m getting pretty close to what I could do with Flash. MouseOver and MouseOut are the biggest challenges of this platform. So, I got to a point that I want to use TweenMax to animate specific values in the javascript space. This is what I have so far.


Tweening a javascript number variable, with ease.


var siteY;


var maxY = 800;

var wheel_speed = .2;



function MouseWheelHandler(event) {




var wheelY = event.wheelDelta || event.detail;


var newSiteY = (siteY*1) + (wheelY*-wheel_speed);

if(newSiteY < 0) newSiteY = 0;

if(newSiteY > maxY) newSiteY = maxY;


/// This is where I'm not sure. How do I animate the value of "siteY"? It's in the main javascript file that does all of the logic. It also drives positioning of page elements. I want the TweenLite to give that mouse wheel value ease.

TweenLite.to(siteY, 1, {value:newSiteY, ease:Elastic.easeOut, onUpdate:drawCanvas});




Is there some type of variable declaration I'm missing for declaring the DOM space, or Javascript space or something? I think this would come in handy for a lot of values, and animation techniques. Or, is my approach wrong?

Link to comment
Share on other sites

Glad to hear you're enjoying the jump from AS to JS with the animation platform. I miss Flash sometimes (especially when debugging) but JS isn't as bad as I thought it would be.


Back to your question...


You can tween siteY based on whatever object it is a property of. So, for example, if you've got it in the global (window) scope, you could do:


TweenLite.to(window, 1, {siteY:newSiteY, ease:Elastic.easeOut, onUpdate:drawCanvas});


However, it's generally considered a good practice to NOT put things in the global/window scope, so you could create a generic object or an instance of some custom object and just tween it that way, like:


var obj = {siteY:0};
TweenLite.to(obj, 1, {siteY:newSiteY, ease:Elastic.easeOut, onUpdate:drawCanvas});
function drawCanvas() {
   console.log("siteY is now " + obj.siteY);


Does that help?

  • Like 1
Link to comment
Share on other sites

  • 5 years later...
var obj = {scroll:parseInt(scrollEle.scrollTop)}



Honestly i would not add another plugin for something so simple, or i wish this was rolled into the main libs


Link to comment
Share on other sites

 I didn't quite follow your logic there - are you saying that solution is better than ScrollToPlugin? Keep in mind that ScrollToPlugin works around a bunch of browser inconsistencies plus it automatically handles cancellation of the tween if/when the user interacts with the scroll (imagine how annoying it'd be if they try grabbing the scrollbar while the tween is in progress), plus it works on the window as well. I'm pretty sure the solution you offered only works in certain browsers on certain types of scenarios. And actually, you could simplify it even more by setting autoCSS:false and animating scrollTop directly on the element itself (skip the whole onUpdate). But maybe I misunderstood what you were suggesting. 


Oh, and it's typically best to start a new topic for things like this rather than jumping into one that's almost 6 years old ;)


Happy tweening!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.