Jump to content

Diaco last won the day on December 20 2017

Diaco had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Diaco

  1. Diaco

    GSAP with easeljs

    Hi mafox296 I must remind you that ; with CSSplugin you can animate CSS Properties of DOM elements , not Canvas objects !! you should animate Canvas shape Alpha property and redraw the stage on tween update . maybe something like this : function init() { var canvas = document.getElementById("canvas"); var stage = new createjs.Stage(canvas); var circle = new createjs.Shape(); var circleprop = {alpha:1}; circle.graphics.beginFill("red").drawCircle(100, 100, 50); stage.addChild(circle); circle.x = 100; circle.y = 100; circle.alpha = circleprop.alpha; circle.on("mousedown", function(evt) { TweenLite.to(circleprop, 3, {alpha:"-=1",onUpdate:circleupdate}); }); function circleupdate() { circle.alpha = circleprop.alpha; stage.update(); } stage.update(); } ...
  2. Hi hackfin u can change zIndex and Z translation simply with this method : $(".page").click( function() { if (pageLocation[this.id] == undefined || pageLocation[this.id] =="right") { var $Zz = ($(".left").length)+1 ; TweenMax.to($(this), 1, {force3D:true,rotationY:-180,className:'+=left',z:$Zz,zIndex:$Zz}); TweenLite.set($(this), {className:'-=right'}); pageLocation[this.id]= "left"; } else { var $Zz = ($(".right").length)+1 ; TweenMax.to($(this), 1, {force3D:true,rotationY:0,className:'+=right',z:$Zz,zIndex:$Zz}); TweenLite.set($(this), {className:'-=left'}); pageLocation[this.id]= "right"; } } );
  3. Hi Jack already i done the same way , but for me it was interesting to know with <body> , anyway thanks for your advice , helpful as always with best regards
  4. hmmm... finally i can reduce the distortions with " dragResistance : 0.5 " but now dragging work at half-speed , is there any better solution !?... and still not working with FF / IE !
  5. Hi jack i`m using Draggable VERSION: 0.10.4 and usually use GSAP with adobe Edge animate . adobe edge create contents in Stage div , so i have only a dive#Stage in html and all of contents created in that . and now for a parallax effect i need to link adobe timeline to gasp timeline and body Scroll with dragging scroll but have this issue ! it seems the scroll proxy avoid to do correct behavior in this case with IE and FF ! and for Distortion pls check this out > http://codepen.io/anon/pen/mLsnl pls try to dragging very slowly , pixle to pixle , and see what i mean about Distortion , pls check that with FF/IE too . thanks in advance
  6. Hi guys i have 2 problem here when use Drag Scroll with $("body") as dragable : 1 - in FireFox and IE that pinned and dosn't drag but work great in chrome and safari !! ... i think maybe this's a proxy issue !!! what's the solution !?... 2 - dragging slowly cause appears heavy distortions on draging !?...
  7. Diaco

    Animation in canvas

    Hi again the default EASE is cause of that effect , try this : ease : Linear.easeNone
  8. Diaco

    Animation in canvas

    Hi Maxime try this : preload your images , change your src attr with one Tween and easily control that : var anim = {frame:0} ; TweenMax.to(anim , 1, {frame:"+=25", roundProps:"frame", onUpdate:updateHandler }); function updateHandler() { image.attr("src", "images/character"+anim.frame+".png"); } with this method you don't need extra DOM objects . hope this helps Edit : u can find easy way to preload images by Rodrigo here : http://forums.greensock.com/topic/10115-get-percent-of-images-loaded-on-page-for-tweening-preloader/
  9. Hi JACK WOW... that`s exactly what I've been looking for . thanks dude
  10. Hi guys is there any way to find the direction of dragging !? i mean that onDrag function return one of these value : left / up-left / up / up-right / right / right-down / down / down-left !? thanks in advance
  11. Hi guys again Thanks you JACK , yes this's what I've been looking for . thanks all of you guys
  12. hi again jonathan i just want to know how can limit the variable between 1 - 36 and have loop between these num. i want to use variable as image name ( myImg.src= "360/s"+movie.frame+".jpg" ) , dont want to have these numbers : Negative numbers , 0 , >36 for my variable but can`t figure out how
  13. Hi jonathan thanks for your replay i already saw these examples and tried to go another way , in the examples he changed background css position or all pictures loaded in dom , and i want to use variable as image name ( myImg.src= "360/s"+movie.frame+".jpg" ) i just want to know how can limit the variable between 1 - 36 . anyway thanks again for your replay
  14. Hi guys i'm trying to make 360 object viewer with TweenMax and Draggable , but have some problems here ; the viewer has 36 frame and shouldn't have negative numbers and larger than 36 . on drag , how can loop the number of frame if that was >36 and <1 ?!... i just want to know how can limit the variable between 1 - 36 . Can anyone help me? i made a codepen , pls check this out : http://codepen.io/anon/pen/jnsjko with best regards and thanks in advance