Jump to content
Search Community

Diaco last won the day on December 20 2017

Diaco had the most liked content!

Diaco

Business

  • Posts

    1,215

  • Joined

  • Last visited

  • Days Won

    86

 Content Type 

Posts posted by Diaco

    GSAP with easeljs

    in GSAP

    Posted

    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(); }

    ...  :)

    Issue animating page turn

    in GSAP

    Posted

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

    Dragable ScrollLeft proxy issue

    in GSAP

    Posted

    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 >

    See the Pen mLsnl by anon (@anon) on CodePen

     

    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

    Dragable ScrollLeft proxy issue

    in GSAP

    Posted

    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 !?...

    Animation in canvas

    in GSAP

    Posted

    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 :


    • Like 2

    direction of dragging !?...

    in GSAP

    Posted

    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 :)

    Draggable and 360 obj viewer :)

    in GSAP

    Posted

    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  :(

    Draggable and 360 obj viewer :)

    in GSAP

    Posted

    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 :)

    Draggable and 360 obj viewer :)

    in GSAP

    Posted

    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  :D

    See the Pen nsjko by anon (@anon) on CodePen

48
49
Page 49 of 49  
×
×
  • Create New...