azuki

Hi all, I'm exploring the possibilities of animating with GSAP in javascript after doing it for years in Flash. While discovering the nuances are fun, I'm finding the edges where Flash made it somewhat easier.... at least for now! I'm trying to recreate an animation I did in Flash but in Javascript. Essentially, it's a masked image that it "scratched" off to reveal an image underneath. Think of a lottery ticket with the silver scratch off stuff... I'd like to animate the reveal with a swiping motion. Any help/ideas on how I would best approach this? A quick google search for animating masks in Javascript turns up alot of SVG usage but I'd like to know how to do this with GSAP. thanks in advance for any thoughts!

Hi all, I'm in my first JS GSAP project and I've just discovered what seems to be a long standing issue with Javascript: fading in elements after the page has loaded, causing a "flicker" before they're able to start in their opacity:0; state. I have my elements starting at opacity:0; in my CSS and in my JS, I'm using TweenMax.from to {css:{autoAlpha:0}. What's the best practice here to prevent that flicker? Any good workarounds specifically using GSAP correctly for a simple fade in? Thanks as always!

Hi greensocks, I'm creating an animation sequence for an element in a site that I'm trying to get to start once the whole div has loaded. My difficulty isn't in starting the animation but in having the entire animation play. From my understanding of TimelineMax, each animation will play in order so if the 1st animation in the timeline doesn't execute, the following animations won't either. Am I wrong in that understanding? Here's what I've got now: <script language="JavaScript" type="text/javascript"> function playBdayTimeline() { var bdaySurprise = document.getElementById("headline1"); var ourBday = document.getElementById("headline2"); var bdayPromoGift = document.getElementById("promoGift"); var bdayPromoDay = document.getElementById("promoDay1"); var timelineIntro1 = document.getElementById("timelineIntro1"); var timelineIntro2 = document.getElementById("timelineIntro2"); var timelineIntro3 = document.getElementById("timelineIntro3"); var promoDeal = new TimelineMax(); promoDeal.from(bdaySurprise, .7, {css:{autoAlpha:0, top:'-20px'}, ease:Quad.easeOut}); promoDeal.from(ourBday, .6, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoGift, .6, {css:{alpha:1, scale:2}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoDay, .6, {css:{autoAlpha:1}, delay:-.1, ease:Quad.easeOut}); promoDeal.from(timelineIntro1, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.2, ease:Quad.easeOut}); promoDeal.from(timelineIntro2, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(timelineIntro3, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(introSlider, .6, {css:{autoAlpha:0, }, ease:Quad.easeOut}); } </script> From the above, the second half of the timeline (bottom four of the promoDeal timeline) animate in beautifully smooth sequential order. However, they do so after the first half of the timeline just "pop" in... no animation whatsoever. If I change any of the properties in the first four lines (ie.change to scale: .5), they take but they don't animate so something seems to be working there... What's going on here? Why would only part of my timeline execute? Thanks for any ideas!!

It may not be the technical approach you're looking for but, in the past, I've found the best "handwriting" effect is achieved animating a mask over the handwritten graphic. The resulting effect is, in my opinion, more hand written than the coordinate approach, which tends to look more mechanical. That being said and being new to javascript myself, I don't know if there is a way to animate a mask in Flash-like way.

Hi all, I've been watching a few tutorials around tweening with the new GSAP for javascript but I'm still wondering how I would go about tweening text. I see that Carl has animated text in his video here: http://www.snorkl.tv...red-javascript/ so I'm wondering if those are just images or css text elements? Text animation in Flash through GS was a breeze which makes me think I'm not approaching the same goal (but in javascript) the right way. Essentially, I have a banner with graphic and text elements that I'd like to animate in a sequence. Are there any tutorials out there for this now? Carl, I know you're probably working on one so if you have time for some insight, I'd appreciate it! thanks!

Hi all, I'm trying to create a vertical menu where each menu bar flips horizontally to reveal copy on the other side of it. At the moment, css3 3D transforms seem like the only option but support for that feature is very spotty (thank you IE!). So, I'm hoping the new GSAP for javascript can help me achieve this. Has anyone tried this out or does anyone have any thoughts on how I might approach this? Thanks for any insight/ideas!

Hey Randall, Thanks for sharing. At the moment, after logging in I'm just seeing a red screen. Maybe it's down for testing? I'd like to see the example when it's ready.

Thanks Carl! Will you be creating any JS animation tutorials on snorkl? I've been following your Flash tutorials for a while now and would love to see more!

Hi, I've been using greensock for Flash projects for a while now and have only recently started back into non-flash projects. Like others, I'm very excited about this animation engine for javascript. I'd like to know if it's possible to use greensock to create a website build animation... essentially, animating the various CSS elements in a sequence, building the site when the user first arrives. Is this possible using greensock/javascript? hope that makes sense and I really appreciate any insight! thanks!

Hi, I'm tweening a semi-large simple vector across the stage and it's appearing "jerky" in the motion. The tween is part of a timeline but I doubt that's the problem. Any tips on how to make this smoother? Basically, it's a large rectangle, moving from x:-1200 to x:0. It definitely moves but its not the smoothest entrance around... buildTimeline.append(new TweenLite(bar, .8, {x:0, ease:Sine.easeIn})); buildTimeline.append(new TweenLite(contentBox, .4, {alpha:1,ease:Sine.easeOut})); buildTimeline.append(new TweenLite(subNav, .4, {alpha:1,ease:Sine.easeOut})); **Sorry, I wanted to add something else funky going on. Although this is in an appended timeline, the other tweens are starting before the first "bar" has reached its final position. Do I have to set a delay on the 2nd and 3rd tweens? I thought this was one of the benefits of TimelineLite? thanks for any thoughts!

ah man, yup, that was it as well as I was ignoring the children of the contentBox. ContentBox is a movieclip, within that is another movieclip called container_mc (used for scrolling a mask, and within that is the text box. So I wasn't loading AND I wasn't targeting the right object. genius... thank you!

Ok, I'm stumped and at this point convinced I'm coming at this from the wrong angle. Please help! I'm trying to load text into a specific container, contentBox, that has scrollBar functionality in a separate scrollBar.as file. Nav buttons would load the associated data into this container. My approach was to try and specify the contentBox as a target for the DataLoader but no luck. Here's where I'm at (sorry if it's a bit messy, clean up is usually the celebratory "it works!" step) package { import flash.events.*; import flash.display.Loader; import flash.display.MovieClip; import flash.filters.*; import flash.net.URLVariables; import flash.utils.ByteArray; import flash.text.TextFormat; import flash.text.TextField; import com.greensock.events.LoaderEvent; import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.loading.*; public class Screenings extends MovieClip { TweenPlugin.activate([GlowFilterPlugin]); var subNav:SubNav = new SubNav(); var contentBox:ContentBox = new ContentBox(); var textLoader:DataLoader = new DataLoader("assets/copy/screenings.txt", {name:"text",x:0,y:0, onComplete:transitionIn, estimatedBytes:900}); var buildTimeline:TimelineLite = new TimelineLite(); var currentNav:MovieClip; var contentFormat:TextFormat = new TextFormat(); public function Screenings() { subNav_mc.addEventListener(MouseEvent.MOUSE_OVER, subNavOver, false, 0, true); subNav_mc.addEventListener(MouseEvent.MOUSE_OUT, subNavOut, false, 0, true); subNav_mc.addEventListener(MouseEvent.CLICK, subNavClick, false, 0, true); contentBox.x = 140; contentBox.y = 179; contentBox.alpha = 0; buildTimeline.append(new TweenLite(horizBar_mc, .8, {x:0, ease:Sine.easeIn})); buildTimeline.append(new TweenLite(contentBox, .4, {alpha:1,ease:Sine.easeOut})); buildTimeline.append(new TweenLite(subNav_mc, .4, {alpha:1,ease:Sine.easeOut})); addChildAt(contentBox,2); subNav_mc.alpha = 0; TweenMax.to(subNav_mc.screenings, 0, {glowFilter:{color:0xffffff, alpha:1, strength:1.5, blurX:8, blurY:8, quality:2,ease:Sine.easeOut}}); contentBox.drag.visible = false; contentBox.scrollBar.visible = false; textLoader.load(); contentFormat.size = 14; contentBoxTitle.defaultTextFormat = contentFormat; } public function transitionIn(event:LoaderEvent):void { TweenLite.to(contentBox, 1, {alpha:1}); } function subNavOver(e:MouseEvent):void { subNav_mc.buttonMode = true; subNav_mc.screenings.mouseChildren = false; subNav_mc.news.mouseChildren = false; subNav_mc.pressReleases.mouseChildren = false; var navItem:MovieClip = e.target as MovieClip; if (navItem != currentNav) { TweenMax.to(navItem, .3, {glowFilter:{color:0xffffff, alpha:1, strength:1.5, blurX:8, blurY:8, quality:2,ease:Sine.easeOut}}); } } function subNavOut(e:MouseEvent):void { var navItem:MovieClip = e.target as MovieClip; if (navItem != currentNav) { TweenMax.to(navItem, .3, {glowFilter:{alpha:0}}); } } function subNavClick(e:MouseEvent):void { contentBoxTitle.text = e.target.name.toUpperCase(); TweenMax.to(subNav_mc.screenings, .3, {glowFilter:{alpha:0}}); var navItem:MovieClip = e.target as MovieClip; if (currentNav != null) { TweenMax.to(currentNav, .3, {glowFilter:{alpha:0}}); } TweenMax.to(navItem, 0, {glowFilter:{color:0xffffff, alpha:1,strength:1.5, blurX:8, blurY:8, quality:2,ease:Sine.easeOut}}); currentNav = navItem; function loadNext(swfUrl:String):void { textLoader.dispose(true); textLoader= new DataLoader(swfUrl, {name:"text",x:0,y:0, onComplete:transitionIn, requireWithRoot:this.root, estimatedBytes:900}); textLoader.load(); } if (currentNav == navItem) { TweenLite.to(contentBox, 1, {alpha:0, ease:Sine.easeOut, onComplete:loadNext, onCompleteParams:["assets/copy/" + e.target.name + ".txt"]}); } } } } Thanks for your help!

yes it does, thank you! Is 'addCallback' something only TimelineMax, versus TimelineLite, offers? As a side note, I've been using Greensock quite a bit and learning more and more as I go along. Whenever I'm stumped, I go through the Docs, Tips, Forums, Google, basically every resource save posting on the forums because, from what I've read, it's just you moderating this thing (impressive, btw). Is there another resource I'm missing or is this it and the answer to this question just passed me by? thanks again

I apologize if this has already been answered, I searched the forums and the docs and couldn't find an answer! I'm simply loading a video using VideoLoader and would like to delay the start of the video, which is set to autoplay immediately. I'd prefer not to wait until the video is completely loaded. Is there a way to append a videoLoader.load(); into a timelineLite so I can queue it up with some other animations? Thanks!

That did it! Thank you! I had initially tried Math.round but wasn't seeing a change... but I still assumed the problem was in the count for some reason. The autoAlpha plugin worked like a charm.

This is a bit trivial but I'm wondering what's going on. Basically, I'm using a SWFLoader to load swfs and preloading them with this: function progressHandler(event:LoaderEvent):void { preloader_mc.visible = true; TweenLite.to(preloader_mc, .5, {y:280,alpha:1, ease:Sine.easeOut}); var percent:Number = event.target.progress; preloader_mc.progressBar_mc.text = String(Math.floor(percent * 100)); if (preloader_mc.progressBar_mc.text == "100") { TweenLite.to(preloader_mc, .5, {y:270,alpha:0, ease:Sine.easeOut}); preloader_mc.visible = false; } } Everything works fine except I noticed the count will always stop at 99 before fading out. What am I missing here? thanks!

Thanks for such a fast reply! I'd like to sequence the images according to button clicks (as in Next and Previous buttons) so I suppose using append() and TimelineLite, as you mentioned, is the way to go. I apologize in advance for the simplicity of this but I'm not quite sure how to move through the Array and apply the animation to each item in the Array... This just dumps them all on the stage and shows the last item in the list. var photoTimeline:TimelineLite = new TimelineLite(); for (var i:uint = 0; i < images.length; i++) { images[i].x = 250; images[i].y = 100; addChild(images[i]); photoTimeline.append(new TweenLite.to(images[0], 5, {alpha:1})); photoTimeline.append(new TweenLite.to(images[1], 5, {alpha:1})); } thanks again

Hi, I've been trying to build an XML Photo Gallery and have followed this thread closely. However, with this code it seems TweenMax is applying a single fade in tween across the entire Array (versus, a fadeIn/fadeOut tween for each item in the Array). Please let me know how I can fix this as I'd really like to use TweenMax to control the animation of photos loaded from XML! function completeHandler(event:LoaderEvent):void { var xmlQueue:LoaderMax = LoaderMax.getLoader("xmlQueue"); var images:Array = xmlQueue.content; for (var i:uint = 0; i < images.length; i++) { images[i].x = 250; images[i].y = 100; addChild(images[i]); TweenMax.fromTo(images[i], 1, {alpha:0}, {alpha:1}); } } Thanks!

Thanks again for your help. I'm in the process of exploring all that LoaderMax has to offer and I've come across something I'm hoping you can help me with. Inside of a loaded swf, I have a subnav, a few buttons that will load their asscociated content (movieclips) from the library. The problem, as far as I can see, is the only way to load and unload movieclips from the library is to use addChild and removeChild. I'm pretty sure LoaderMax doesn't handle movieclip loading but I wanted to be sure. If it doesn't, do you have any tips on handling the loading and unloading of movieclips from the library with control similar to what LoaderMax offers, specifically loading or animating the clip onto the stage and then removing it with an outro animation? Thanks!

Thanks for the info. I had only been focusing on learning TweenLite/Max and TimelineLite/Max and didn't even know there was a LoaderMax! Greensock is the gift that keeps on giving From what I can tell in the code you provided, 'content' is used to access a loaded swf? So, I'm guessing any movieclip within the loaded swf would be accessed like so: currentSWFLoader.content.movieclip1 Is that right? I'd like to sequence an animation within the loaded swf. For example, if an 'About' link is clicked in the main nav, I'd like the 'about.swf' to load and have the elements within that swf animate into place (a basic page-build animation, I suppose). Also, is this used to unload the previous swf: currentSWFLoader.dispose(true); Thanks again for clarifying!

Hi, After scouring the interweb for a solution, I'm at a loss and hoping someone here can help. I've run into what seems like a common speedbump for AS3 newbies like myself. That is, I'm trying to build a simple Flash site that has a main FLA with a nav. Each button in the nav loads a corresponding swf (for each page of the site) into the same area in my main FLA. I'm not sure why this is so difficult but this has caused me to rip way too much hair out from my head... My goal is to eventually have transition animations between each of the pages. We've all seen it done: If you're on the 'Home' page and you click the 'About' page, the movieclips on the current page animate out and eventually disappear before the elements of the next page animate in. It all looks very cool and I want to learn how to do it! I'd like to use TweenLite and TimelineLite (or Max) to achieve this but I can't get past finding a way to load the swf files. Argh! So I guess it breaks down to this: 1) What's the best way to load and unload external swfs? 2) How can I sequence an 'out animation' of the current page, before loading the next page, which I'd like to sequence an 'in animation' ? Note: I've tried addChild and removeChild without success, primarily because the main Nav becomes covered up by the loaded swf. Using addChildAt(loader, 0), works for the loading but loading another swf does not replace the first one. Again, argh! This is killing me so I'd really appreciate some help! Thanks in advance.

Thanks for the tips Carl! Shortly after posting, I was on your site going through the 'Sticky Nav' tutorial. After multiple attempts at trying to force my code into a class (I'm still trying to find the best use of custom classes), I realized that might be overkill. Is it always best practice to try and get most of your code into classes and off the timeline? In any event, I finally worked it out. I really appreciate the clarification regarding the usage for TweenLite and TimelineLite. I'll be spending some time on Snorkl.tv to improve my skills so thanks for posting those tutorials! Here's the code I landed on (a bit more streamlined than in my previous post - and it took long enough for me to figure it out!) var currentNav:MovieClip; function navOver(e:MouseEvent):void { var navItem:MovieClip = e.target as MovieClip; if (navItem != currentNav) { TweenLite.to(navItem.deco_mc, .3, {alpha:1}); } } function navOut(e:MouseEvent):void { var navItem:MovieClip = e.target as MovieClip; if (navItem != currentNav) { TweenLite.to(navItem.deco_mc, .3, {alpha:0}); } } function navClick(e:MouseEvent):void { var navItem:MovieClip = e.target as MovieClip; if (currentNav != null) { TweenLite.to(currentNav.deco_mc, 0, {alpha:0}); } TweenLite.to(navItem.deco_mc, 0, {alpha:1}); currentNav = navItem; switch (navItem.name) { case "navAbout_mc" : container_mc.addChild(aboutBg); break; case "navScreenings_mc" : container_mc.addChild(screeningsBg); break; case "navTrailer_mc" : container_mc.addChild(trailerBg); break; case "navPhotos_mc" : container_mc.addChild(photosBg); break; default : break; } } thanks again, Demian

Hi all, I just discovered Greensock and have started using it. I *think* I'm getting the hang of it but, honestly, it's either so simple that I can't believe it or I'm completely mucking it up... I'm a novice to AS3 so I'd really appreciate any insight. I'm creating a simple fade in/fade out animation for a button rollover/rollout. Here's what I've written so far, which works fine I'd just like to check with someone if this is the most efficient way to go about coding this animation. navAbout_mc.addEventListener(MouseEvent.ROLL_OVER, aboutRollOver); navAbout_mc.addEventListener(MouseEvent.ROLL_OUT, aboutRollOut); navAbout_mc.deco_mc.alpha = 0; //comment: I wasn't sure if I needed to set the movieclip.alpha to 0 before fading it in but this is the only way it would work. navAbout_mc.buttonMode = true; function aboutRollOver(evt:MouseEvent):void { var navAboutTimeline:TimelineLite = new TimelineLite(); navAboutTimeline.append(TweenLite.to(navAbout_mc.deco_mc, .4, {alpha:1, ease:Sine.easeIn})); navAboutTimeline.timeScale = 2 } function aboutRollOut(evt:MouseEvent):void { var navAboutTimeline:TimelineLite = new TimelineLite(); navAboutTimeline.append(TweenLite.to(navAbout_mc.deco_mc, .4, {alpha:0, ease:Sine.easeOut})); navAboutTimeline.timeScale = 2 } Also, I'm just starting to write classes for my projects in order to clean them up and create some reusable code. Although not really Greensock specific, would I be able to take the above chuck of code, put it in a separate .as file and attach it to other buttons (rather than have it on the main timeline of my fla file? I'm guessing it would go something like this: package { import com.greensock.TimelineLite; import com.greensock.TweenLite; import com.greensock.easing.*; import flash.events.MouseEvent; import flash.display.MovieClip; public class navBtnAnimation extends MovieClip { public function navBtnAnimation() { this.addEventListener(MouseEvent.ROLL_OVER, navBtnRollOver); this.addEventListener(MouseEvent.ROLL_OUT, navBtnRollOut); this.deco_mc.alpha = 0; buttonMode = true; } function navBtnRollOver(evt:MouseEvent):void { var navBtnTimeline:TimelineLite = new TimelineLite(); navBtnTimeline.append(TweenLite.to(this.deco_mc, .4, {alpha:1, ease:Sine.easeIn})); navBtnTimeline.timeScale = 2; } function navBtnRollOut(evt:MouseEvent):void { var navBtnTimeline:TimelineLite = new TimelineLite(); navBtnTimeline.append(TweenLite.to(this.deco_mc, .4, {alpha:0, ease:Sine.easeOut})); navBtnTimeline.timeScale = 2; } } } thanks for any insight!