Jump to content
GreenSock

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

lister110 last won the day on October 7 2012

lister110 had the most liked content!

lister110

Members
  • Posts

    23
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by lister110

  1. Hi everyone (Newbie here). I'm playing around with a small animation which staggers some type. I was trying to find a way of animating into a window, as if it was masked, so I tried to use overflow hidden, but Im animating the mask itself.... My brain is slightly fazed..., so was wondering how I can animate some elements in a div and use the stagger there? so the Mask stays in place.. if it that works??

     

    also, is there a way to control the second part of the animation (.to) and almost group the stagger perhaps, rather than one after the other. 

     

    thanks in advance (sorry if my code is a little iffy ;-))

     

    lister

    See the Pen GRvWELW by velvetsoup (@velvetsoup) on CodePen

  2. Hi, excuse me for my lack of knowledge. I'm playing around with greensock/animate for the first time....

     

    I am trying to scale an objects width from the left ('left_mc' across the width of the stage by 50%, I have the same happening the far right side ('right_mc')), almost like closing curtains, both objects are at very far edges of the stage. I've been tinkering with 'Scale' using TweenMax, but I cant fgure out how to pin an object and scale in one direction. Also, I guess I'll have to establish the stage dimensions first so I can define the percentage. Can someone please help point me in the right direction? or any tips on animations relative to the stage with scaling.

     

    many thanks.

     

    lister

  3. Hi, could someone just point us in the right direction..

     

    I have a few frames animating...

     

    1st key frame appears in and fades out, 2nd key frame, prices appear one after the other and all fades out. 3rd key frame, appears with simple message. At the moment, after the prices animate independently I then need them all the fade out, to reveal key frame 3 but I can't seem to figure the best way to do this, maybe add them to their our timeline?, could someone help?

     

    tl.to(this.logo_mc, 1, {alpha:0},"+=3");
    tl.from(this.price1_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut});
    tl.from(this.price2_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut});
    tl.from(this.price3_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut});
    tl.from(this.price4_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut});
    tl.from(this.price5_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut});
    tl.from(this.price6_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut});
    tl.to(this.image_mc, 1, {alpha:0},"+=3");

     

    cheers

     

    lister

  4. This is probably an easy question, I keep getting a syntax error on this code..

     

    //declare my variables
    var cloud1Middle = sym.$("cloud1Middle");
    var cloud2Bottom = sym.$("cloud2Bottom");
    var cloud3Top = sym.$("cloud3Top");
    
    //instantiate a TimelineLite   
    var tl = new TimelineLite({onComplete:function() {
    TweenLite.to(cloud1Middle, 60, {left:800});
    TweenLite.to(cloud2Bottom, 100, {left:-800});
    TweenLite.to(cloud3Top, 40, {left:-800});
    this.restart();
    });
    
     
    Syntax error at line 12 in "Timeline.play" on "Stage": Unexpected token )
    I was working at some point.
     
    lister
  5. Hi everyone, please move if this is posted in the wrong forum. I'm just trying out Greensock in Adobe Edge Ani 2015. I understand Adobe Edge Ani 2015 has been pulled, but for the time being this is what I'm using.

     

    Im a proper newbie, so please bear with me.

     

    Im confused how adobe have changed the scripting to work with objects on the stage. Im following this simple tutorial which was published 2012. The current tutorial may be out of date, I'm not sure.?

     

    http://paultrani.com/2012/11/edge-animate-and-greensock/

     

    I have a simple rocket png on the stage and I'm trying the 'onClick' function or maybe 'onLoad' just to move the rocket, a bit like the einstein in the link above. But nothing seems to happen when I publish the HTML file. Ive followed the tutorial pretty closely, but now i'm stumped.

     

    Is this tutorial too old now?

     

    Can anyone help? or point me to a newer tutorial with a very basic setup of TweenLite with Adobe Edge Ani 2015 for a very basic animation.

     

    thanks

     

    lister

  6. Hi, I really appreciate all the handwork gone into these scripts...

     

    Im pretty new to Tween animation using these classes. But Im now dabbling in a small animation with a spinning coin (see http://www.ilike2flash.com/2012/06/spinning-animation-in-flash.html)

     

    This was done on a standard timeline, but Im drying to replicate this using timelinelite and I'm having a few problems (newbie coder). Im trying to scale the _x and add blur and then reveal the back from _x 0 to 1 with blur to 0. and I can't seem to get this working. Here is the code so far.. can anyone help??

     

     

    import com.greensock.*;
    import com.greensock.easing.*;
     
    back_mc.scaleX = -0;
    back_mc.alpha = 0;
     
    var timeline:TimelineLite = new TimelineLite({onComplete:done});
    timeline.to(front_mc, 1, {scaleX:0, alpha:0, ease:Back.easeIn})
    .to(front_mc, .1, {blurFilter:{blurX:50, blurY:0}, ease:Back.easeIn})
    .to(back_mc, .1, {scaleX:1, alpha:1})
    .to(back_mc, .1, {blurFilter:{blurX:50, blurY:0}, ease:Back.easeIn});
     
    function done(){
    timeline.restart();
    }
     
     
    lister
  7. I have a some animated text appending each other using TweenMax and TimeLine lite. Im pretty new to AS and was wondering how I create a nested Timeline. What I would like is the mc_1, mc_2 and mc_3 to animate (Turn blue) as the mc_4 fades in. At the moment each one has to allow the other to finish. Here is the code (My code may look a little whack as I'm pretty new to AS)

     

    file.jpg

    http://www.velvetsou...ashBanners.html

     

    import com.greensock.*;
    import com.greensock.easing.*;
    import com.greensock.plugins.*;
    TweenPlugin.activate([TintPlugin]);
    //initialize settings with a 0 duration tween outside of the timeline:
    TweenLite.to(mc_1, 0, {_x:780});
    TweenLite.to(mc_2, 0, {_x:780});
    TweenLite.to(mc_3, 0, {_x:780});
    TweenLite.to(mc_4, 0, {_alpha:0});
    TweenLite.to(mc_5, 0, {_alpha:0});
    var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});
    
    //move mc_1 on stage;
    timeline.append( new TweenMax(mc_1, .2, {_x:164, ease:Circ.easeOut}) );
    timeline.append( new TweenMax(mc_1, .8, {tint:0xAEAFB3}));
    
    //move mc_2 on stage ;
    timeline.append( new TweenMax(mc_2, .2, {_x:272, ease:Circ.easeOut}),.8 );
    timeline.append( new TweenMax(mc_2, .8, {tint:0xAEAFB3}));
    //move mc_3 on stage ;
    timeline.append( new TweenMax(mc_3, .2, {_x:404, ease:Circ.easeOut}),.8 );
    timeline.append( new TweenMax(mc_3, .8, {tint:0xAEAFB3}));
    //move mc_4 on stage;
    timeline.append( new TweenMax(mc_4, 1, {_x:164, _alpha:100}) );	  
    //fade all on the stage;
    timeline.appendMultiple([ new TweenMax(mc_1, 1, {_alpha:0}),
    	new TweenMax(mc_2, 1, {_alpha:0}),
    	new TweenMax(mc_3, 1, {_alpha:0}),
    	new TweenMax(mc_4, 1, {_alpha:0})], 2);
    
    //fade in last animation;
    timeline.append( new TweenMax(mc_5, 1, {_x:164, _alpha:100}) );	  
    //fade out last animation;
    timeline.append( new TweenMax(mc_5, 1, { _alpha:0}),3 );
    function myFunction(){
    timeline.restart();
    }
    

     

    update: I thought Id create a new timeLineLite variable but I cant understand how to trigger the timeline instance at the right time. I want it to change colour as the line underneath fades in. But only at that time.

    //change all to blue TESTING;
    var tl:TimelineLite = new TimelineLite();
    tl.appendMultiple([ new TweenMax(mc_1, 1, {tint:0x0085CF}),
     new TweenMax(mc_2, 1, {tint:0x0085CF}),
     new TweenMax(mc_3, 1, {tint:0x0085CF})], 5);
    

     

    Thanks

     

    Rob

  8. I got this working thanks for all the help, heres the code..

     

     

    import com.greensock.*;
    import com.greensock.easing.*;
    
    //initialize the blur setting with a 0 duration tween outside of the timeline:
    TweenLite.to(mc_1, 0, {blurFilter:{blurX:50}});
    TweenLite.to(mc_2, 0, {blurFilter:{blurX:50}});
    TweenLite.to(mc_3, 0, {blurFilter:{blurX:50}});
    //etc
    
    var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});
    
    //move mc_1 on stage and tween blurX to 0;
    timeline.append( new TweenMax(mc_1, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) );
    
    //move mc_1 off stage and blurX to 50;
    timeline.append( new TweenMax(mc_1, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2);
    
    //move mc_2 on stage and tween blurX to 0;
    timeline.append( new TweenMax(mc_2, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) );
    
    //move mc_2 off stage and blurX to 50;
    timeline.append( new TweenMax(mc_2, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2);
    
    //move mc_3 on stage and tween blurX to 0;
    timeline.append( new TweenMax(mc_3, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) );
    
    //move mc_3 off stage and blurX to 50;
    timeline.append( new TweenMax(mc_3, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2);
    
    function myFunction(){
    timeline.restart();						
    }

     

    I am also watching your great screencasts over at ActiveTutes.

     

     

    rob

    • Like 1
  9. Hi I have amended the code:

     

     

    
    import com.greensock.*;
    import com.greensock.easing.*;
    
    var timeline:TimelineLite = new TimelineLite();
    timeline.append( new TweenMax(mc_1, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:5, ease:Bounce.easeOut}}) );
    timeline.append( new TweenMax(mc_1, 1, {_x:-150, ease:Elastic.easeInOut}), 2);
    timeline.append( new TweenMax(mc_2, 1, {_x:240, ease:Elastic.easeInOut}) );
    timeline.append( new TweenMax(mc_2, 1, {_x:-100, ease:Elastic.easeInOut}), 2);
    timeline.append( new TweenMax(mc_3, 1, {_x:240, ease:Elastic.easeInOut}) );
    timeline.append( new TweenMax(mc_3, 1, {_x:-100, ease:Elastic.easeInOut}), 2);

     

    I wated to create a blur in, see the text without a blur and then blur out, also when I play this the stage is white first, then it changes to grey (my bg colour) and then it plays the animation..

     

    Thanks for the help so far

  10. Hi everyone,

     

    I am looking at using TimelineLite for small and simple banner (testing/playing). I have 3 clips sliding into the page pausing and then sliding out. Each clip being independent (so I'm using .appended). Im not sure how to play the first tween, pause, and then continue this tween to the end of _x (AS2), this will all need to continue as a loop... At the moment I have them just sliding onto the stage (clip w:155) then play the second tween etc.., could someone please help

     

    (Stage 468x60)

     

    import com.greensock.*;

    import com.greensock.easing.*;

     

    var timeline:TimelineLite = new TimelineLite();

    timeline.append( new TweenLite(mc_1, 5, {_x:"-300", ease:Elastic.easeOut}) );

    timeline.append( new TweenLite(mc_2, 5, {_x:"-300", ease:Elastic.easeOut}) );

    timeline.append( new TweenLite(mc_3, 5, {_x:"-300", ease:Elastic.easeOut}) );

     

    Thanks

  11. Hi,

     

    Just want to say, how much fun I had playing around with this..

    All I want to do is reverse my tweens on complete and then goto and play from the beginning.

    I cant figure out how I restart the movie after the reverse.

     

    I did have gotoAndPlay in myFunction function and it looped ok. But I want to reverse and play again. I hope this makes sense, as i'm a bit of a newbie

     

    import com.greensock.*;
    import com.greensock.easing.*;
    
    var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});
    timeline.append(TweenLite.to(mc1, .5, {x:"-600",  ease:Back.easeOut}), 2);
    timeline.append(TweenLite.to(mc2, .5, {x:"-550",  ease:Back.easeOut}), 2);
    timeline.append(TweenLite.to(mc3, .5, {x:"-500", ease:Back.easeOut}), 2);
    timeline.insertMultiple(TweenMax.allTo([mc1, mc2, mc3], 2, {y:"-200"}), timeline.duration );
    
    function myFunction():void {	
    timeline.reverse();
    }

     

     

    lister

×