Search the Community
Showing results for tags 'tween'.
Found 199 results
-
I'd like to have some table cells animate from their automatically laid out relative position, to certain designated absolute positions to highlight them, and then have them return to their position in the table. In particular I have a Gantt chart with three selectable cells which I would like to tween from its initial... {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} to a temporary... {top:"0%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"33%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"66%",left:"0%",width:"100%",height:"33%",position:"absolute"} ...and then tween them back to their initial relative values again. Is there a Greensock way of doing this? If I use a regular to(...) tween with the values above, the 'position' value is toggled monolithically to 'absolute', with the top and left set to 0 so the cells jump to the top left corner immediately, then tween their location and width from there, rather than tweening smoothly from their initial (relative) location. There's probably a workaround, involving JQuery calculating the starting positions for the tween from the rendering engine, but perhaps someone has an elegant way of doing this, as I'm sure I'm not the only one who needs the behaviour.
-
Hello, I'm trying to use a single tween, to tween a object sometimes.. I don't want create a TweenMax object every time, like TweenMax.to(...); Whats the better way to do this? Is possible? Something like this: private var tween:TweenMax = new TweenMax(object, .6, {}); // Just a example, this will be active when the user click in a button tween.to({x:20}); Thanks
-
I have movie clips rotating in a circle. When they near the end of their rotation, they slow down. I would like the rotation to be at a constant speed the whole time. This is my code: var circle:CirclePath2D = new CirclePath2D(275, 200, 45.15); function rotateCircle():void{ TweenLite.to(Circle3, 4, {circlePath2D:{path:circle, startAngle:90, endAngle:90, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle2, 4, {circlePath2D:{path:circle, startAngle:18, endAngle:18, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle4, 4, {circlePath2D:{path:circle, startAngle:306, endAngle:306, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle1, 4, {circlePath2D:{path:circle, startAngle:162, endAngle:162, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle5, 4, {circlePath2D:{path:circle, startAngle:234, endAngle:234, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); }
-
Hi, I have created a tween to move an object from a point A to a point B with bezier trajectory: I have to dynamically calculate the starting and ending points, that will be percentages of the whole animation. How can I tell the tween to run from i.e. 23% to 78% of the whole animation (obviously in 78-23% of the total time)? I think I have to use progress property, but maybe I am doing something wrong, because it looks like the animation runs from 23 to 78% and then to 100%. I am doing like this: var timeLine: TimelineLite = new TimelineLite(); timeLine.fromTo(item, totalTime, { x: 0, y: 0 }, { bezier: { type:"thruBasic", values: [ { x: 300, y: 200 }, { x: 500, y: 800 } ] }, ease: Linear.easeNone } ); TweenLite.fromTo(timeLine, totalTime* (0.8 - 0.5), {progress: 0.5 }, {progress: 0.8, ease: Sine.easeOut } ); I have to learn a lot about timelines...
-
I came across a peculiar problem with Greensock today whilst playing with a 'pause' function for a game. The purpose of the two following functions are: When the pause button (in this case it's a sprite named it 'menu') is pressed it causes all existing TweenMax instances to pause in place. It also sets the stage's framerate to 0, making all display objects pause in place. I've been told this is the best method pausing the game. When the button is pressed again, it should resume all the tweens from where they were initially paused. However, the problem is these tweens jump to their finishing position regardless of when they were paused, so when I resume the game the tween finishes abruptly. The strange thing is, if the framerate isn't changed (resumes at 30, for example), the Tweens resume from where they originally paused. Am I just being stupid and missing something obvious? AS3: protected function pauseGame(event:MouseEvent):void { menu.removeEventListener(MouseEvent.CLICK, pauseGame); menu.addEventListener(MouseEvent.CLICK, resumeGame); TweenMax.pauseAll(true, true); stage.frameRate = 0; } protected function resumeGame(event:MouseEvent):void { menu.removeEventListener(MouseEvent.CLICK, resumeGame); menu.addEventListener(MouseEvent.CLICK, pauseGame); TweenMax.resumeAll(true, true); stage.frameRate = 30; }
-
Hi Everyone, Been using greensock for a couple of months now. I finally got us to upgrade to the newest version and some things are different. My issues is we have a main big timeline that our animation runs on. There are points in it when we pause the timeline and people need to click on stuff and other animations happens. After they click everything they need to we restart the main timeline. The click functions have their own timeline with tweens in them. Well on the newer version we are using, when we resume the main timeline it ignores the css/tweens that happen in the click timeline. It restarts like the clicks animations never happen. Before on the older version we used that didn't happen. I'm seeing if there is a way to have a main timeline and have it keep the css and animtaion end tween from click on resume of the main timeline. I hope this makes sense. Thanks.
-
Hi all: On occasion I use Flash to create some fairly elaborate apps for client presentations. I intend to move to JScript at some point, but I'm concerned that I still can't do everything I can do in flash. One of my big questions is: can we animate vector shapes using JScript or some other HTML 5 compliant tool? Also, is there an app that can be used to lay out graphics that plays nice with GS? Thanks much.
-
Here is my full script: <script> $(document).ready(function() { var controller = $.superscrollorama(); //This code snippet is built on the parallax example: controller.addTween( '#gun', (new TimelineLite()) .append([ TweenMax.fromTo($('#hammer'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: -25}, ease:Quad.easeInOut}), TweenMax.fromTo($('#trigger'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: 40}, ease:Quad.easeInOut}) ]), 500, // scroll duration of tween 200); // offset? }); </script> What I need to know is... how can I add a tween to this timeline? I just need to know how to add tweens after the one I already have. Everything I have tried does not work.
-
I'm trying to understand how a tween's invalidate() function works. According to the docs, if you invalidate() and restart() a tween, the timeline will take the new parameters of the tween, right? I tried to build a simple example to understand this behavior, but what ends up happening is really confusing. Here's what I have. (I'm using KineticJS) var t1 = new TimelineMax({paused:true, onUpdate:stageUpdate, onUpdateScope:stage}); var tweenX = TweenMax.fromTo(rect, 1, {setX:100}, {setX:500}); var tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:0}); t1.add(tweenX,0); t1.add(tweenY,1); When I add these tweens to the timeline, they work as expected. Now, I have a function where I'm trying to update the way tweenY works. So, I update the parameters, invalidate the tween and the timeline and restart the timeline. function updateTween() { tweenY.invalidate(); tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:200}); t1.seek(0).invalidate(); t1.restart(); } However, the behavior is really confusing. Original behavior: 'rect' moves right to x:500, then moves up to y:0. After updating the tween, what I thought would happen: 'rect' moves right to x:500, then moves down to y:200. What actually happens: 'rect' moves diagonally to x:500, y:200, then moves up to y:0 I built a codepen to show this: http://codepen.io/anon/pen/fLAkd Can someone help me understand this please?
-
Hi! I know there are some handy methods for naming and accessing tweens across object hierarchy, but I'm not sure about this... I have a pulsating yoyo tween on "MC" and i add a child to MC ( MC.addChild(IAmInsideMC); ) later in the app, but I want that child to ignore the pulsating Tween that is applied to it's parent... I realize that might be counter-intuitive, and there are certainly workarounds, but I'm wondering if there's a reasonable way to accomplish this? Thanks all!
-
Hi, I was wondering if there is any help out there to create a metaball effect with two 2D circles. I am using Raphael to create the 2D shapes. Is this something that needs to be done within Raphael? The effect I am going for is that there are a bunch of indicators moving vertically down a line at varying speeds. When they get close enough, I would like to animate them with a metaball effect so that the circles merge together and a number is displayed to show how many are in the cluster. Is there any help out there to construct something like this? The bezier plugin only does tweening "along a bezier path," if I am not mistaken - it won't do a shape tween using beziers?
-
i was trying to figure out, if possible, how to chain an instance of multiple tweens. For example: var tween1 = TweenMax.to('#image1', 3, {css:{scale:1.5}, ease:Linear.easeNone}); var tween2 = TweenMax.to('#slide1', 3, {css:{opacity:1}, ease:Linear.easeNone}); The above works.. but couldn't i just chain them, like below? var tween1 = TweenMax.to('#image1', 3, {css:{scale:1.5}, ease:Linear.easeNone}) .to('#slide1', 3, {css:{opacity:1}, ease:Linear.easeNone}); But when i try this, the browser throws an error: TypeError: TweenMax.to(...).to is not a function The reason i'm asking is because if i have to pause the animation i have to basically use the below: $('#slider').on("mouseenter",function(){ tween1.pause(); tween2.pause(); }).on("mouseleave",function(){ tween1.resume(); tween2.resume(); }); I have to declare pause and resume twice. If i had multiple tweens in one instance, i could declare pause() and resume() only once. How do i create an instance (reference variable) for multiple tweens? Thanks ahead of time for any help!
-
How would you clear all CSS properties that were applied to an animation element by TweenMax? var tween = TweenMax.to($image, 5, {css:{ scale:1.5 }, ease: Linear.easeInOut, onComplete: function(){ tween.invalidate().progress(0); } }); I basically want to reset or clear all CSS properties that TweenMax adds to the inline style tag. So i can get the element back to its original state before it was animated by TweenMax. I was testing with tween.invalidate() .. but I was unsure if this was correct? Thank you for any help!
-
Hi, I am a total noob to jQuery and just learned what GreenSock was today. I would really like to use Superscrollorama for a site I'm building but I don't totally get it. I'm attempting to play with this example but nothing is happening: https://github.com/johnpolacek/superscrollorama/blob/master/simpledemo.html When I save this as an html file and open it up, it's just black words on a white screen. Please help!
-
Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!
-
I'm new to GSAP and really like it so far. I have one challenge that I think could be easily solved by SplitText, but unfortunately my company isn't interested in going the membership route. Is there an alternative to achieving the same thing? I have a parent element with a header and a variable amount of paragraphs. I'd like to animate the header, then each paragraph in turn. That is, once the first paragraph is finished animating, the second paragraph starts animating. When the 2nd paragraph is finished, the 3rd starts animating, and so on. Here is some sample HTML: <article> <h1>My header</h1> <p>First paragraph</p> <p>Second paragraph</p> </article> Does GSAP have an equivalent of jQuery's $.each() function, such that I could call the same animation on an element with a class, like: $( 'article p' ).each( function() { tl.from( $( this ), 1.5, { rotationX : -90, transformOrigin : 'left top', ease : Elastic.easeInOut } ); } ) That's just pseudo code to convey my idea. I realize it won't work Thanks in advance for any help!
-
Hi, I have a text (blockquote) that should move from right to left constantly. It should start with opacity 0 then go to opacity 1 in 2 seconds. After that, it should keep moving constantly (same speed) for about 10 seconds and then fade out (back to opacity 0) but keep moving in the same speed. I've tried this way, but it doesn't get the correct movement I want: var tl = new TimelineLite(); tl.to('.quote1', 2, { opacity:1, right:"+=50px", delay:3 }) .to('.quote1', 10, { right:"+=150px" }) .to('.quote1', 3, { opacity:0, right:"+=50px" }); What I want to know is if it's possible to have a timeline for each property (e.g. "right" and "opacity") or if there is a better way to achieve the same result with only the object timeline...
-
I have a few tweens as part of a TimelineMax instance that have a speed of 0. However they are executing out of sequence with the rest of the tweens, seemingly running at the very start of the timeline playback. Changing the speed to 0.1 fixes this issue. Here's a fiddle: http://jsfiddle.net/wxxkA/2/ Any ideas? Thanks
-
Hello, i am an absolute noob with javascript and superscrollorama. I am trying to fly in a few images when you scroll down the page. The first images needs to fly-in from the left and the 2nd from the right. It worked for 1 image but when i try to make other images fly-in non of them work (or only the first one). Please help me! html: <h2 id="fly-it"><img src="img/image1.png"></h2> <h2 id="fly-it2"><img src="img/image1.png"></h2> script: controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .5, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#fly-it2', TweenMax.from( $('#fly-it2'), .5, {css:{left:'1000px'}, ease:Quad.easeInOut}));
-
Hi there! I hope that somebody can help me out with a problem I stumbled upon. I want to animate on a scroll by using the superscrollorama plugin. With GSAP I can use a timeline to change the position of an element on scrolling. I want the following actions to take place: Move the element from -1900px to 550px on screen by scrolling After that, let the element stay at it's position while scrolling a certain amount of pixels (let's say 2000px) After the 2000px without movement, let the element move from it's current position to 1900. So we have an animation of an element from the left side of the screen, to the right with a pin moment. I hope someone can help me out here because I have not succeeded in writing a code that doesn't conflict with the first animation and a pin moment. This is what I have so far: controller.addTween('body',(new TimelineLite()).append([TweenMax.fromTo($('#vogel'), 1, {css:{left: -1900}, immediateRender:true}, {css:{left: 550}})]), 1000);
-
This may have nothing to do with GSAP as I have both a jquery library and a pathfinding ai library, but I'm not getting any errors, and the coords spit out by my ai seem fine. After the third click on the screen the entire window (chrome) has to be closed and reloaded. Any ideas? I really want to have my basic movement down so I can actually get to building my game http://jsfiddle.net/ccarterc1984/BfpF2/ -
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.
-
Noticed a bug involving positional tweens for a DOM element with a dropShadow filter. The reason for the CSS3 dropShadow filter is that I have a transparent PNGs I'd like to provide a shadow for, and GS's box-shadow only adds a shadow to the rectangular block shape of the element. Unfortunately, I've noticed that whenever the filter is applied to an element, I can not position the element via standard GS Tweens. (Ideally this would be as part of a TimelineLite, but the same bug applies to TweenLite / TweenMax calls). Here's a fiddle that shows the phenomenon. By default, the element tweens just fine. However, toggle on the .shadowfilter class (which adds the webkit and FF versions of dropShadow), and the element no longer translates. Any ideas for workarounds for this? Or is this a known bug? I realize that as dropShadow is a filter, this is not going to be supported by GS for sometime, but can I at least still move a filtered element around? http://jsfiddle.net/tkshredder/tYZ8E/9/
-
Hi, I am trying to make an animation where a wheel eases in to rotate quickly then stops really slowly for 10 seconds. So I would like it to run slowly for about the last 3 seconds. I am struggling to get this really slow ease out and was hoping someone would have some advice? I have looked at every ease class available, I have tried making my own custom ease, but it seems I just cannot physically achieve the ease out I want. I have also tried using the ThrowProps plugin but again the easing was not good enough. All I want is an ease out that causes the rotation to move really slowly for the last third of my animation. I generally use the TweenLite.to() method to start my animation. Thanks!
-
Hi - I am sure this is really easy but I can not see how I can use the TweenMax.to but play when I get to the frame. I have tried so many combinations. This is my TweenMax.to that will get me to the frame label, but pauses when it gets there. It is controlling a Movie Clip that has frame labels. function Park_Play(e:MouseEvent):void{ TweenMax.to(CharacterMovie, 0.5, {frameLabel:'Park'}); }
