javascript - Errors with greensock tween activated by mouse in pixi.js -

i'm trying scroll greensock tween in pixi. i'm getting errors trying hook code gets mouse/arrow input (trackpad.value) tween.

here's working greensock test tween, make sure have greensock working in pixi: (have tween position element in pixi):

var t1 = new timelinemax({onupdate:animate, onupdatescope:stage});  t1.to(bg.position, 3, {y:100}); 

here's code i'm trying hook trackpad.value greensock code (i'm getting following error: uncaught typeerror: bg.position not function):

trackpad = new trackpad(document); var t1 = new timelinemax({paused:true, onupdate:animate, onupdatescope:stage});      t1.progress(bg.position( math.abs( trackpad.value ) / 3240)); 

i tried following - didn't work (but didn't error):

var moveit = trackpad.value / 3240;   t1.progress(bg.position, moveit, {}); 

here's code trackpad value defined:

/*  *  param: html element scrolled  */ trackpad = function(target) {     this.target = target;     this.value = 0;     this.easingvalue = 00;     this.dragoffset = 0;     this.dragging;     this.speed= 0;     this.prevposition = 0;      $(this.target).mousedown($.proxy(this.onmousedown, this));     this.target.onmousewheel = $.proxy(this.onmousewheel, this);      // not forgetting touchs!     this.target.ontouchstart = $.proxy(this.ontouchstart, this);      // stop dragging!     $(document).keydown( $.proxy(this.onarrow, this))//function(e){      //this.target.ondragstart = function(){return false;} }  // set constructor trackpad.constructor = trackpad;  // create functions  trackpad.prototype.unlock = function() {     this.locked = false;     this.speed = 0;     this.easingvalue = this.value; }  trackpad.prototype.lock = function() {     this.locked = true; }  trackpad.prototype.update = function() {     if(this.easingvalue > 0)this.easingvalue = 0;     if(this.easingvalue < -10700)this.easingvalue = -10700;     this.value = this.easingvalue;      if(this.dragging)     {         var newspeed = this.easingvalue - this.prevposition;         newspeed *= 0.7;          this.speed += (newspeed - this.speed) *0.5;//+= (newspeed - this.speed) * 0.5;         this.prevposition = this.easingvalue;     }     else     {         this.speed *= 0.9;         this.easingvalue +=  this.speed;          if(math.abs(this.speed) < 1)this.speed = 0;     } }  trackpad.prototype.onarrow = function(event) {      if (event.keycode == 38) {       //      this.speed = 4;        return false;     }     else  if (event.keycode == 40) {       //      this.speed -= 4        return false;     } }  trackpad.prototype.onmousewheel = function(event) {     event.preventdefault();     this.speed = event.wheeldelta * 0.1; }   trackpad.prototype.startdrag = function(newposition) {     if(this.locked)return;     this.dragging = true;     this.dragoffset = newposition - this.value;  }  trackpad.prototype.enddrag = function(newposition) {     if(this.locked)return;     this.dragging = false; }  trackpad.prototype.updatedrag = function(newposition) {     if(this.locked)return;     this.easingvalue = (newposition - this.dragoffset); }  /*  * mouse  */ trackpad.prototype.onmousedown = function(event) {     if(event)event.preventdefault();      event.returnvalue = false;      $(document).mousemove($.proxy(this.onmousemove, this));     $(document).mouseup($.proxy(this.onmouseup, this));      this.startdrag(event.pagey);     }  trackpad.prototype.onmousemove = function(event) {     if(event)event.preventdefault();     this.updatedrag(event.pagey); }  trackpad.prototype.onmouseup = function(event) {        //$(this.target).mousemove(null);     $(document).unbind('mousemove');     $(document).unbind('mouseup');     //this.target.onmousemove = null;      this.enddrag();// = false; }  /*  * touch!  */ trackpad.prototype.ontouchstart = function(event) {     //event.preventdefault();      this.target.ontouchmove = $.proxy(this.ontouchmove, this);     this.target.ontouchend = $.proxy(this.ontouchend, this);      this.startdrag(event.touches[0].clienty); }  trackpad.prototype.ontouchmove = function(event) {      event.preventdefault();     this.updatedrag(event.touches[0].clienty); }  trackpad.prototype.ontouchend = function(event) {     this.target.ontouchmove = null;     this.target.ontouchend = null;     this.enddrag(); } 

** edit

tl = new timelinelite( { paused: true } );   // respond scroll event - in case using jquery  $(window).scroll(); //apply whatever math makes sense progress timeline progress 0 1 within parameters. like, $(window).scroll( function() {     var st = $(this).scrolltop();     if ( st < somearbitraryvalue ) { // somearbitraryvalue, start         // here, "someotherarbitaryvalue"         // "height" of scroll react         tl.progress( math.abs( st ) / someotherarbitaryvalue );      }  }); 

i thought of editing old answer decided against because think answers original question.

take @ codepen demo new approach same problem. hoping listen community on approach have taken here in terms of listening events , using them adjust gsap timeline.

there 4 js files used in example: app.js, constants.js, timeline.js & listeners.js. links can found in settings gear icon of javascript editor of demo. of these files heavily annotated links solutions found on internet specific problems.

among these files, code of app.js follows:

javascript:

function application(){} application.prototype.init=function(){     this.constants=constants.getinstance();     this.base_url=this.constants.base_url;     this.image_js_url=this.constants.image_js_url;     this.image_pixi_url=this.constants.image_pixi_url;     this.image_gsap_url=this.constants.image_gsap_url;     this.createpolyfillforbind();     this.setuprenderer();     this.loadimages(); }; application.prototype.setuprenderer=function(){     this.stagewidth=window.innerwidth;     this.stageheight=window.innerheight;     //this.renderer=pixi.autodetectrenderer(this.stagewidth,this.stageheight);     this.renderer=new pixi.canvasrenderer(this.stagewidth,this.stageheight);     document.body.appendchild(this.renderer.view); }; application.prototype.loadimages=function(){     var self=this;     this.loader=new pixi.loaders.loader(this.base_url,1,{crossorigin:''}); // pixi loader class [http://pixijs.github.io/docs/pixi.loaders.loader.html]     this.loader.add(this.image_js_url); // loader extends resourceloader [http://adireddy.github.io/docs/haxe-pixi/v3/types/pixi/plugins/resourceloader/resourceloader.html]     this.loader.add(this.image_pixi_url);     this.loader.add(this.image_gsap_url);     //this.loader.once('complete',function(){self.onimagesloaded.apply(self);}); // vanilla js alternative jquery's proxy() method [http://stackoverflow.com/a/4986536]     this.loader.once('complete',this.onimagesloaded.bind(this)); // bind() polyfill [https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/function/bind#polyfill]     this.loader.load(); }; application.prototype.onimagesloaded=function(){     this.setupsprites();     this.inittimeline();     this.initlisteners();     this.startticker(); }; application.prototype.setupsprites=function(){     this.containerbg=new pixi.container();     this.spritejs=new pixi.sprite(pixi.utils.texturecache[this.base_url+this.image_js_url]); // texturecache in action [http://www.html5gamedevs.com/topic/7674-load-textures-synchronously/?p=45836]     this.spritepixi=new pixi.sprite(pixi.utils.texturecache[this.base_url+this.image_pixi_url]); // pixi.texturecache became pixi.utils.texturecache in v3 [http://www.html5gamedevs.com/topic/14144-v3-utilstexturecache-utils-is-not-defined/?p=80524]     this.spritegsap=new pixi.sprite(pixi.utils.texturecache[this.base_url+this.image_gsap_url]);     this.containerbg.addchild(this.spritejs);     this.containerbg.addchild(this.spritepixi);     this.containerbg.addchild(this.spritegsap);     this.spritejs.anchor.x=this.spritejs.anchor.y=this.spritepixi.anchor.x=this.spritepixi.anchor.y=this.spritegsap.anchor.x=this.spritegsap.anchor.y=0;     this.spritejs.position.x=this.spritejs.position.y=this.spritepixi.position.x=this.spritegsap.position.x=this.containerbg.position.x=this.containerbg.position.y=0;     this.scaleimage(this.spritejs);     this.scaleimage(this.spritepixi);     this.scaleimage(this.spritegsap);     this.spritepixi.alpha=this.spritegsap.alpha=0;     this.spritejs.position.y=this.constants.gutter;     this.spritepixi.position.y=this.spritejs.height*2+this.constants.gutter;     this.spritegsap.position.y=this.spritejs.height+this.spritepixi.height*2+this.constants.gutter; }; application.prototype.scaleimage=function(sprite){     //var scale=math.min(this.stagewidth/sprite.width,this.stageheight/sprite.height); // resize aspect ratio [http://community.createjs.com/discussions/createjs/547-resizing-canvas-and-its-content-proportionally-cross-platform#comment_27266530] , [https://opensourcehacker.com/2011/12/01/calculate-aspect-ratio-conserving-resize-for-images-in-javascript/]     var scale=this.stagewidth/sprite.width;     sprite.scale.x=sprite.scale.y=scale; }; application.prototype.inittimeline=function(){     this.timeline=new timeline();     this.timeline.init(this.containerbg,this.spritejs,this.spritepixi,this.spritegsap,this.stagewidth,this.stageheight); }; application.prototype.initlisteners=function(){     var self=this;     //this.listeners=new listeners();     //this.constants.setlistenersobject(this.listeners);     //this.listeners.init();     this.listeners=listeners.getinstance();     this.listeners.addlisteners();     document.addeventlistener(this.constants.scrolled,this.onscroll.bind(this),false);     document.addeventlistener(this.constants.started_drag,this.onstartdrag.bind(this),false);     document.addeventlistener(this.constants.dragged,this.ondrag.bind(this),false);     document.addeventlistener(this.constants.end_drag,this.onenddrag.bind(this),false); }; application.prototype.onscroll=function(e){ this.timeline.onscroll(e); }; application.prototype.onstartdrag=function(e){ this.timeline.onstartdrag(e); }; application.prototype.ondrag=function(e){ this.timeline.ondrag(e); }; application.prototype.onenddrag=function(e){ this.timeline.onenddrag(e); }; application.prototype.startticker=function(){     var self=this;     //tweenlite.ticker.addeventlistener('tick',function(){self.render.apply(self);},false); // vanilla js alternative jquery's proxy() method [http://stackoverflow.com/a/4986536]     tweenlite.ticker.addeventlistener('tick',this.render.bind(this),false); }; application.prototype.render=function(){this.renderer.render(this.containerbg);}; application.prototype.createpolyfillforbind=function(){ // [https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/function/bind#polyfill]     if(!function.prototype.bind){         function.prototype.bind=function(othis){             if(typeof this!=='function'){                 // closest thing possible ecmascript 5                 // internal iscallable function                 throw new typeerror('function.prototype.bind - trying bound not callable');             }             var aargs=array.prototype.slice.call(arguments,1),                 ftobind=this,                 fnop=function(){},                 fbound=function(){                     return ftobind.apply(this instanceof fnop                             ?this                             :othis,                         aargs.concat(array.prototype.slice.call(arguments)));                 };             fnop.prototype=this.prototype;             fbound.prototype=new fnop();             return fbound;         };     } }; // var app=new application(); app.init(); 

p.s. have heavily experimented design patterns in same example, prototype , singleton patterns. looking forward comments on them community.

t