Jump to content

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

Cute Object Oriented Javascript Difficulties

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 post
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 post
Share on other sites

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




Link to post
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 post
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 post
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 post
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.