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
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hello, I was working with the new KineticJS version and the 2D Physics from GSAP. Although there is no visible error, I can't seem to animate an element the way I used to, with TimelineMax/Lite and "onUpdate:stage.draw", "onUpdateScope:stage" Anyone has any ideas or has faced similar problem? I have set up a codepen here: http://cdpn.io/lzkbu Thanks in advance!
  2. I have several elements which will be using the same animation functions. So I want to have a timeline for animating 20 px to the left for instance. How do I pass in the element to the timeline without knowing before hand which element will need to be moved? I imagine the most efficient way is to not create a new timeline variable each time which what I think is throwing me for a loop. e.g. http://jsfiddle.net/ccarterc1984/6LQhJ/ This is my first day trying Greensock so be gentle.
  3. I'm just getting started with gsap. I've created a simple script, but for some reason I can't get it to actually do anything. I'm getting zero results in both firefox and chrome on linux. What am I doing wrong? Here is the html source... <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="UTF-8" /> <title>greensock test</title> <meta name="description" content="gsap test" /> <link rel="stylesheet" type="text/css" href="/css/test.css" /> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/js/TweenLite.min.js"></script> <script type="text/javascript" src="/js/gsap-test.js"></script> </head> <body id=""> <div id="outer-wrapper"> <header id="page-header"> </header> <!-- page-header ends --> <section id="main-content"> <h1>GSAP Animation Library Test</h1> <section id="testing"> <p>Lets see what he can do with Tweenlite</p> </section> </section> <!-- main-content ends --> <footer id="page-footer"> </footer> </div> <!-- outer-wrapper ends --> </body> </html> And here is my js: $(document).ready(function() { $("p").click(function (){ var $target = $(this) ; TweenLite.to( $target , 1, {backgroundColor:"#000"} ) ; console.log("clicked"); }) }); All the libraries load. Firebug returns no errors. When I click the <p> element, I get the console message, but nothing else.
  4. Hello! First of all, I know that this is not necessarily the right place to be looking for answers regarding SuperScrollorama since it's completely separate. But it does seem as though this is a good place to at least ask the question. I'm trying to design a single-page site, and have run into a problem. The effect I'm aiming for is: A fixed, centered <ul> navigation at the top of the page. On scrolling down, the menu will break apart between the 3rd and 4th <li> and create a space of 250px, into which the logo will scroll (and shrink) and then remain for the duration. I'm achieving the effect by adding a margin-right to the third <li> element, and this is what i want to be animated against the scroll position. However, although the page loads correctly, with the margin-right at 0, as soon as the page starts to scroll the margin-right jumps straight to a number around 180px, before scrolling smoothly for the duration that I need it to. Then, on scrolling up, it animates smoothly but only returns to the random 180px value instead of 0. Here's a JSfiddle: http://jsfiddle.net/aTz4X/5/ It's just that initial jump that's the problem. I've been trying to figure it out for days, but can't get to the bottom of it. Any help or pointers would be much appreciated. Rob
  5. There is a problem with tweens in these conditions(edited): Browser has multiple opened tabs and has worked for about 10-15 min Browser was idle and then used again When I open up more then 3 tabs Code: var tweens = { main_area: { layer_buttons:{ getTween: function (_this, _properties) { return TweenMax.to(_this,0.5, { css: _properties, paused: true, delay: 0.2 }); } } }}var g = tweens.main_area.layer_buttons.getTween;var start = g($(".info", "#information-start"),{opacity: 1});$("#layers").on("mouseenter", "#information-start", function () { start.play(); }).on("mouseleave", "#information-start", function () { start.reverse(); }); Problem:When I do a quick mouseenter from outside of browser or from another or mouseleave, animation doesn't render correctly and I just see end result (without seeing actual animation)Note:I've noticed this behavior only in Chrome so far. I don't know what will be users situation with browser, that's why I want to know is there some kind of workaround for this problem. After completely closing all tabs and restarting chrome browser, all tweens work how they supposed to work. It's not just in this situation, it's with every tween I have on my site.
  6. I'm using a simple animation on a object TweenMax.fromTo($('#navigation .active-field'), actFieldSpeed, {css: {top: ((index - 1) * 1.5) + 'rem', backgroundColor: prevColor}, immediateRender: true}, {css: {top: ((index ) * 1.5) + 'rem', backgroundColor: altColor}}) Problem is, that it leaves traces of of object's background in WebKit-based browsers under reverse animation. What can be cause of that? http://studijaodri.lt/klientai/musu/#digital_agency
  7. Hi! I´m using the simpledemo.html as a reference, and I´m having trouble when trying to use the same animation in two different elements, see code below: <div id="examples-1"> <h2 id="fade-it">Fade It</h2> <h3 id="fade-it">Fade It</h3> <h2 id="spin-it">Spin It</h2> <h2 id="scale-it">Scale It</h2> <h2 id="smush-it">Smush It</h2> </div> Note that the first <h2> tag and the <h3> tag should both fade in, but it makes the whole file stop working. I know that Ids should not be repeated, but, how can I use Fade in animation more than once in the same file? Thanks in advance!
  8. Hi. I'm a Flash guy that's been dabbling in HTML5/Javascript stuff off and on for about a year now. Here's what I'm trying to accomplish: Eight circles of different colors animating in to form a ring (using a bezier curve) with the bottom circles overlapping the top ones (seen in circles.png) Once animated in to position, clicking on one of the circles will animate them until the clicked circle is at the bottom. The layers/zIndex will distribute correctly to match the original layout. I'm using TweenMax right now to animate the intro and it works pretty well. However, I'm using setTimeout to stop the animations so they stop when they get to the "correct" position to form the ring. This is a little finicky, as they will stop in slightly different positions each time. This leads to my first question: is there a better way stop the animations so the circles stop evenly along the ring? The other part of this is how I'm going about it. Eventually I'll want the animations to go back and forth simultaneously when you click a circle and i'm wondering: will this be done easily using functions of TweenMax like reverse or will TimelineMax be better for this situation? One last question... Here is some of my code: TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:{ curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }, ease:Linear.easeInOut } ); I use the bezier line a few times and I'm wondering if I can simplify it by doing something like: var bez1 = BezierPlugin.bezierThrough([{left:100, top:100}, {left:75, top:75}, {left:100, top:50}], 1.5); TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:bez1 }, ease:Linear.easeInOut } ); I'm submitting a zip file with my work so far. Let me know if you have any suggestions or questions about what I'm trying to do. Thanks! Test.zip
  9. I have successfully animated a backgroundPosition through TimelineLite to achieve a some animation. I am now trying to see if I can achieve this with one Tween. Here is what I need to do but its not working yet. var TL = TweenMax("#seqHolder", 1, {backgroundPosition:"-=300px 0", repeat:23, paused:true}); I want to have the background subtract 300px from its position every time the tween repeats. Any input would be greatly appreciated. Thanks.
  10. Hello, I'm new here. I'm redesigning my personal website and I wanted to make the current position of the social icons change to be part of the header once they are scrolled over. I wanted some type of animation timing effect that was triggered by the position on the page. This is my first time playing with Tween and Timeline, so I'm really a novice as to how things work. I've been playing with it, but all the extra effects will most likely be removed once I figure out exactly what it is I need and whether or not Tween can handle it. So here it is: http://marlonstevenson.com
  11. Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J
  12. Hello, I love GreenSock, it's a phenomenal product. I am a Flash Developer migrating to HTML, Canvas, CSS, and Javascript web designing. The Javascript versions are excellent. The one challenge I am having is trying to make the CSS 3D Transformations work. I looked at the demos of how powerful these transformations can be at: http://www.greensock.com/transitions/ http://www.greensock.com/css3/ and the "CssPlugin" section of your documentation at: http://api.greensock.com/js/ But, unfortunately I see a whole lot of small snippets of code (i.e. the trailer for a really awesome movie that I can't wait to see), but I would really like to see the whole html page with the css and javascript included (i.e. the whole "unrated, director's cut with alternate endings and commentary.") After searching through the GreenSock forums I found this link that the great Carl Schooff posted some downloadable examples of CSS Transformations: http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/ What I'm trying to say, is I would really appreciate it, if it were a little easier to figure out how to use these powerful tools to the most. Thanks, for viewing & best wishes, J
  13. Hi, I am a total newbie to greensock. I've used Flash for a while, but even with that I usually find code and copy and paste it over and over again (not a true coder). I want to get a simple file that will control a CSS element to animate with the scroll bar but I can't seem to find anything simple enough to break apart. I have done several tutorials... http://www.instantsh...llorama-scroll/ but I can't seem to extract what I need. Any help would be greatly appreciated.
  14. Hello I need create a simple infinite scroll animation with text I upload the files for example, I am trying with yoyo but no not achieve the same result I am using AS2 Thanks for help blerlogopase.zip
  15. Hey guys... This is my first post to this forum... I am working on a project and i want to have a tweening effect similar to the 'Custom Presets : fly-in pause fly-out' option in Flash IDE. Its just that i want to create it with action script and want to control it properly through code. For the rest of the tweening in my project i am using 'Greensock's TweenMax'. So if someone can help me creating the same effect in this engine it would be helpful. Thanks.
  16. 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!
  17. 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)
  18. 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!
  19. 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
  20. 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
  21. 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!
  22. 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
  23. 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!!
  24. 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; } } } .
  25. 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