Jump to content

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

Search the Community

Showing results for tags 'animation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I'm trying to create an animation (timelineLite animation) that can be controlled by a scrollbar or scrubber. a perfect example of which, is the demo swfs on the TimelineLite page as well as the TimelineMax page. The scrollbar has to allow the viewer to play the animation forward and scrub the animation in reverse. Thanks in advance!
  2. So I tried searching this on here and stackoverflow too, but can't seem to find the exact same issue. I've drawn an object using shapes on the stage. I grouped everything in a movieclip called "number_mc". After which I wanted to Animate the scaleX and scaleY values of that movieclip like so: var scaleAnim:TweenLite = new TweenLite(nummer_mc, 2.5, {scaleX: 2, scaleY: 2}); or TweenLite.to(nummer_mc, 2.5, {scaleX: 2, scaleY: 2}); But they just don't work, nothing happens, To my believe I'm not doing something different from the dozen times I've done this before. Kind Regards, Shuyinsan PS: I use Flash CS6 btw (in case this matters)
  3. 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!
  4. Another wonderful tutorial by Carl. You can find flash version here http://www.snorkl.tv...or-forward-out/ This tutorial cover advance timeline animation and good start for a beginners, so that why I have chosen this tutorial and decide to convert it into JS version. Download JS version : http://02cbcf1.netso...ut-finished.zip I think you peoples like this. In this JS version, few animations are missing like text rotation. You can find that difference in Flash & JS version. I am completely unable to understand how to manage rotationX property in JS. Can you guys help me in this issue? You can find fonts embed in this JS version here http://www.typograph...ctLineID=100013 Thanks, B2rana
  5. So i am completely new to greensock and javascript animations in general and relatively new to javascript (although I know other web languages HTML, CSS, PHP, MYSQL) I have a website that works like a single page website where the navigation just goes to div ID's and I use a basic smooth scroll to the get there. My navigation is fixed to the top of the page. So in the navigation bar that is fixed to the top of the page, I have this little tag that I would like to drop down / expand when you are on a specific div and then shrink back up when you go away from that div If I am not making sense, here are some screen shots: The "home page" which is basically the first <div> in the stack http://cl.ly/33371i3B2q0V0D203T1u the "about page" which is the third <div> in the stack http://cl.ly/013H3f3c1i093C152J32
  6. 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!
  7. Hi Jack! I'm trying to synchronize sequence of audios obj_snd.attachSound("audio"+idAudio) and obj_snd.start(currentTween.position), with animation MyTimelineLite.append(TweenLite.to(obj_mc, 2 {_x:200, onStart:playAudio, onStartParams:[idAudio]}) Not found any topic about the issue and I think the greenSock (which is great) does not have native support this. I need to detect whether a tween has audio attached, and moving the slideControl (drag slide) resynchronize the audio related to that tween. (I think it would be something like onMidProgress:myFunc). I think the logic is to detect the occurrence of an append (TweenLite. ..), his CurrentProgress and see if it passes onStart: PlayAudio, onStart: Params [idAudio] to synchronize ... Other two questions: 1 - audios that last beyond the animation are not accounted for by the progressBar. 2 - I'm losing onStart event to position the marker of progress midle progress of a Tween. Annex. simple .FLA I appreciate any help, Thanks! sinc_audio_tween.zip
  8. 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!!
  9. Hi, everyone! I want to add functionality to my photo gallery app (Air mobile) - different types of animation of the thumbs of the photos. Now I did like the code below. This is the simplest move left-right and top-bottom. But I need more different patterns of animation y- the movement as a 3D carousel, spinning in a circle, orbiting, movement of the sun's rays and back, movement along the wave path etc. I would be very grateful if you have a ready-made pieces of code for these and similar animations with help TweenLite lib. [bindable] private var stageW:int = Capabilities.screenResolutionX; [bindable] private var stageH:int = Capabilities.screenResolutionY; private var itemsVector:Vector.<Image>=new Vector.<Image>(); private var xSpeedVector:Vector.<Number>=new Vector.<Number>(); private var ySpeedVector:Vector.<Number>=new Vector.<Number>(); stage.addEventListener(Event.ENTER_FRAME, update); private function moveSetup():void { for(var i:int = 0; i < FlexGlobals.topLevelApplication.objects.length; i++){ if (FlexGlobals.topLevelApplication.objects[i] is Image){ var item:Image=FlexGlobals.topLevelApplication.objects[i] as Image; item.x=Math.random()*stageW; item.y=Math.random()*stageH; var randomDirection:Number=Math.random()*2*Math.PI; this.addElement(item); itemsVector.push(item); xSpeedVector.push(2*Math.cos(randomDirection)); ySpeedVector.push(2*Math.sin(randomDirection)); } } } protected function update(event:Event):void { for(var i:uint=0;i<itemsVector.length;i++){ itemsVector[i].x+=xSpeedVector[i]; itemsVector[i].y+=ySpeedVector[i]; if(itemsVector[i].x>stageW){ itemsVector[i].x-=stageW; } if(itemsVector[i].x<0){ itemsVector[i].x+=stageW; } if(itemsVector[i].y>stageH){ itemsVector[i].y-=stageH; } if(itemsVector[i].y<0){ itemsVector[i].y+=stageH; } } } .
  10. Hi all, I need to build a flash application that requires filtering of spots. Every time the user selects another filter i reload the layout function, remove all objects that are currently in the movieclip and then re-add them and re-apply the tween with one for lus. But for some odd reason, when i change the filter before all the tweens are completed, they stop rendering at the point i changed it. Causing the tween to get stuck... and displaying only half on the results. They get added in the display list but just aren't shown due to the tween not completing. Does someone has a solution? I think i need to reset the tweens on the object or clear something... override public function layout():void { var coloms:int = Math.floor(componentWidth/116.65); var padding:Number = 5; while(this.numChildren > 0) { TweenLite.killDelayedCallsTo(getChildAt(0)); TweenLite.killTweensOf(getChildAt(0)); this.removeChildAt(0); } if(tiles.length > 0) { trace('Thera are: '+this.numChildren+' in the displaylistt'); for(var i:int = 0; i < tiles.length; i++) { var spotThumb:SpotThumb = tiles[i]; spotThumb.x = (i % coloms) * (116.65 + padding); spotThumb.y = int(i / coloms) * (116.65 + padding); trace(i); switch(appModel.currentFilter) { case 'alle': default: { addChild(spotThumb); break; } case 'like': { break; } case 'monument': case 'foodendrinks': case 'vervoer': case 'shoppen': case 'hotel': { if(spotThumb.spotCat == appModel.currentFilter) { addChild(spotThumb); } break; } } TweenLite.from(spotThumb, 0.2, {alpha:0, delay: 0.1*i}); } } } Thanks in advance! Stephen
  11. Hello everybody ::- ). I have a board with many well organized objects on it. I would like to create an animation where they all start circling at various speeds. But the problem is that I want them to start on their circle paths from their current locations, swirling around the center of the screen. Any idea how I could do this? I guess I could use Pythagora's theorem to find out the radius of the Circle, but I'm unsure how I could find out the progress of the Object onto its Circle Path, so that I only start the animation from that point. Otherwise, when I add it to the Path, it'll lose its original position and I don't want that.