marcusfriberg

Thanks! Your code didn't do it for me, but i got it working by changing to AS3.

Hi, I am trying to repeat my timeline. The timeline plays perfect, but just one time. Please, can somebody please take a look at my code to see if there is any problems. import com.greensock.*; import com.greensock.easing.* mcText._alpha = 0; mcButton._alpha = 0; mcLegal._alpha = 0; mcPlaneicon._alpha = 0; mcPlaneicon2._alpha = 0; mcPlaneicon3._alpha = 0; mcPlaneicon4._alpha = 0; mcAmsterdamicon._alpha = 0; mcParisicon._alpha = 0; mcParis._alpha = 0; mcAmsterdam._alpha = 0; mcPriceamsterdam._alpha = 0; mcPriceparis._alpha = 0; var tl = new TimelineMax({repeat:2}); tl.add( TweenLite.to(mcAmsterdam, 0.3, {_alpha:90, delay:1, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdamicon, 0.3, {_alpha:90, delay:1.4, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon2, 0.3, {_alpha:90, delay:1.8, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceamsterdam, 0.3, {_alpha:90, delay:2.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcLegal, 0.5, {_alpha:100, delay:2.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdamicon, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdam, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceamsterdam, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon2, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcBg, 0.3, {_x:-1920, delay:5.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParis, 0.3, {_alpha:90, delay:5.8, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParisicon, 0.3, {_alpha:90, delay:6.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon3, 0.3, {_alpha:90, delay:6.6, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceparis, 0.3, {_alpha:90, delay:7, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParisicon, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParis, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceparis, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon3, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcLegal, 0.5, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcText, 0.3, {_alpha:100, delay:10.7, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon4, 0.3, {_alpha:90, delay:11.1, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_alpha:90, delay:11.5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:13, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:13.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:14, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:14.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:15, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:15.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcBg, 0.3, {_x:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcText, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon4, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) );

Thanks a lot! - Marcus

Hi, I am having problem with setting up a timeline using TimelineLite. The animations work perfectly by themselves using delays, but I guess I do something wrong when I try to put them in a timeline. This is what one of my timelines look like. This one doesn't animate anything at all. var tl = new TimelineLite(); tl .to(mcBall, 2.8, {_x:86, _y:500, _rotation:7200, ease:Expo.easeIn, overwrite:false}) .to(mcBall, 0.2, {_x:88, _y:480, ease:Sine.easeInOut, overwrite:false}) .to(mcBall, 0.2, {_x:90, _y:500, ease:Sine.easeInOut, overwrite:false} ); And here is what another attempt looked like. Here the animation works but it seems that all animations start at the same time. var tl = new TimelineLite(); tl.add( new TweenLite.to(mcBall, 2.8, {_x:86, _y:500, _rotation:7200, ease:Expo.easeIn, overwrite:false}) ); tl.add( new TweenLite.to(mcBall, 0.2, {_x:88, _y:480, ease:Sine.easeInOut, overwrite:false}) ); tl.add( new TweenLite.to(mcBall, 0.2, {_x:90, _y:500, ease:Sine.easeInOut, overwrite:false}) ); Here is what my original code looks like; TweenLite.to(mcBall, 2.8, {_x:86, _y:500, _rotation:7200, delay:0, ease:Expo.easeIn, overwrite:false}); TweenLite.to(mcBall, 0.2, {_x:88, _y:480, delay:2.8, ease:Sine.easeInOut, overwrite:false}); TweenLite.to(mcBall, 0.2, {_x:90, _y:500, delay:3, ease:Sine.easeInOut, overwrite:false}); Help is much appreciated! - Marcus

Hi, I am looking for a way to create a banner that will work like this; 1. There is a image or button that is moving around in the banner and as soon as you hover over the image/button that movieclip/timeline will stop/pause on the current frame. The movement of the button will be looped until the hover is triggered. 2. Then I want another movie clip/timeline to start and keep playing until the end even if you still don't hover over that button. Is this possible to do using timelinelite in an easy way or is that any other way that you recommend me to try accomplish this? I am quite new to flash as2 programming so any type of help will be much appreciated! TIA! - Marcus

Hi guys, I am animating a div with a transparent background (the ball). When I use rotation the transparent background seems to get a black background in IE8. This only appears when I use css rotation in my animation. Is there someone who have seen this before and knows how to get rid of this problem? Is it possible to use rotation in any other way than css? This is what my animation looks like; tlBall.to(ball, 0.2, {css:{left:"400px",top:"366px",rotation:360}, delay:0, ease:Sine.easeInOut}) This is that the background with the ball looks like; http://cl.ly/image/1U2a0w0T3O17/image004.png Thanks! - Marcus

Hi, I'm quite new to GSAP and I wonder what the easiest way to loop a timelineLite would be? I've managed to loop separate tweens inside the timeline but not the whole timeline. TIA!

Hi guys, I am having some IE problems and would like some support. In IE 7 and 8 the blue "panels" containing price and the text "Boek nu!" in the last frame shows through the whole animation. This works fine in Safari, GC, FF and so on, but not in IE 7 and 8. The only issue in Safari, GC and FF is that these panels show up for like a millisecond in the beginning of the sequence. I guess the both issues has anything to do with the css property "visibility", but I can't get it to work. Can someone please look at my animation and check for what could be wrong and what could fix this. This is the URL to my animation: http://marcusfriberg.com/greensock/ie-test/ Please look at it in Safari, FF, GC or newer IE to see what I want it to look like, except for that issue in the beginning where the panels show for a millisecond sometimes, and compare that to how it looks in IE 7 and 8. Please let me know if there is something that is unclear. Thanks for any kind of help! - Marcus