Jump to content


Cute Object Oriented Javascript Difficulties

Recommended Posts



I'm trying to make an easy way to implement multiple views on a single webpage using HTML5 GSAP animation.  So I declare an object constructor "pageElement."  Inside I have a method that triggers an animation based on object properties declared earlier in the constructor given if I want the object on or off screen.  The code throws an error [sEE ATTACHMENT.]  Essentially what the error tells me, is that within the GSAP declaration, it does not accept methods within methods (method-ception).  I hope there's some error in my code... This would be awesome.


Anyway, thanks for taking a look, and have an awesome day :-)


Jacob Alford



See the Pen JoaPGM?editors=001 by jacob_alford (@jacob_alford) on CodePen

Link to comment
Share on other sites

Hi jacob_alford  :)


pls try this :


function pageElement(elem,transOn,transOff,timing,ease){
this.object = elem;
this.VarsOn = transOn;
this.VarsOff = transOff;
this.VarsOn.ease = ease;
this.VarsOff.ease = ease;
this.timeDur = timing;
this.transition = function(direction){
if(direction == "on"){
this.currentTrans = TweenMax.to(this.object,this.timeDur,this.VarsOn);
}else if(direction == "off"){
this.currentTrans = TweenMax.to(this.object,this.timeDur,this.VarsOff);
return this.currentTrans;
return this

and then do something like this :

var myP = pageElement("#container",{x:100},{x:0},1,'Back.easeOut');

$('#reverse').on('click', function(){  myP.transition('off')  });

pls check this out :


See the Pen bNxbME by MAW (@MAW) on CodePen


  • Like 5
Link to comment
Share on other sites

Nice! That worked! I didn't know there was such a sub-property! Thanks!




Link to comment
Share on other sites

great work, Diaco.


Jacob, you may also be interested in the video in this post: http://greensock.com/forums/topic/11162-how-to-setup-control-of-tweens-and-timelines-together-and-separately/?p=44994


its a little different  than what you asked for in that there a multiple slides that each have their own animateIn / animateOut methods, but it might come in handy some day.



  • Like 2
Link to comment
Share on other sites

I have a question for you, will I put the animation properties in "Quotations?" In the example you go without

Link to comment
Share on other sites

quotations are only necessary when you are specifying a unit or relative value

//non-pixel unit
TweenLite.to("#item", 1, {x:"1em"});

TweenLite.to("#item", 1, {x:"+=100"});
  • Like 1
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.