Jump to content
GreenSock

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

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

[sEE CODEPEN]

 

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

@jacob_alford

post-34592-0-36737100-1425592291_thumb.png

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');
myP.transition('on');

$('#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!

 

 

-Jacob

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.

 

c

  • 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"});

//relative
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.

×