Search the Community
Showing results for tags 'tween'.
Found 199 results
-
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'}); }
-
INTENDED EFFECT: I have a TweenMax with a variable for the target. This target is the current element. var currentElement = $("#div1"); The tween is nested inside a TimelineMax set to repeat. Once the tween completes, an onComplete fires. Within my onComplete function, the target will dynamically change. currentElement = $("#div2"); ISSUE: Target never changes on timeline repeat of the nested tween, even after redefining the variable. I know that invalidate() works with changes in vars parameter, but it does not work with the target. QUESTION: Is there any way to achieve the intended effect? Any help much appreciated.
-
Hey guys so im having a little trouble here. So i have a textField that updates after each hitTest which is called levelText. So what im trying to accomplish is the levelText field to fade out after 1 second at the start of each new level. It works fine for the first level but when i go to level 2 or 3 the text field doesnt appear at all. I believe i have to destroy it and re add somehow? Here is the code im using. private function startNextLevel():void { TweenLite.to(levelText, 1, {autoAlpha:0}); } Please any information would help. Thank you.
-
Hey guysso this is probably really easy and sorry ahead of time if this is a Repost. So im very new to this ive been reading up on how to use tweenLite and Max but im still really confused. So i have a MovieClip that gets added to stage when the user pushes play Game. I want this MovieClip to move Up and Down in a Linear path i want it to go on a infinite amount of times. My stage height is 480 if this is needed. I've tried this but it only goes up and doesnt come back down TweenMax.to(this, 5, { y: -480, yoyo:2 } ); What do i need to do to make it reverse its path and keep repeating this path?
-
i was trying to use the className property on TweenLite to add and remove a css class from an element during mouse over an mouse out. using jquery, i had done something like this: this.$container.hover( function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "+=open", ease: Expo.easeInOut }); }, function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "-=open", ease: Expo.easeInOut }); }); the problem i'm having is when i interrupt the animation with another mouse event that will cause it to remove the class before the animation is finnished, it seems the class name doesnt actually become added onto the element until after the animation is complete. so if you hover in and hover out before the animation completes, there wont be any class name to remove and the tween for removing the class will be ignored. i hope this makes sense. thanks for you time!
-
I want to tween various movieclips over the same path. My problem is I want them to be offset so that they follow the same path but still are at a distance from each other. I searched the forums but couldn't find any offset path property. Anything you can suggest?
-
Hello everyone, I need help here. I tried Greenshock's Tweenlite, but I found the animation appears "jumpy". I don't know what's wrong The file's attached. Here's the code of document class: package { import com.greensock.*; import com.greensock.easing.Back; import flash.display.MovieClip; /** * ... * @author */ public class Main extends MovieClip { public function Main() { TweenLite.to(box_mc, 3, { x:100, y:100, ease:Back.easeOut } ); } } } // (I used Flash CS 6 btw )
-
Hi, I love to be able to use the Javascript version of Tweenlite, however, I can't figure out how to reset a tween? I have a function set up that should reset the tween when called. Any suggestions are highly appreciated. Thanks! Dada
-
Hi I'm new to Tweenlite, have a query that may be very simple. I have a tween thats repeating an object being rotated 360degrees, I want to update the tween so it eases out to a new degree requirement e.g. from... thisTween = new TweenMax(rec, 4, {rotation:"360", ease:Linear.easeNone, repeat:-1 }); to {rotation:"25", ease:Linear.easeNone, repeat:0 }); so it basically eases the objects rotation, stopping at 25 degrees. Spent the last hour trying to solve this, nothing so far. Any help greatly appreciated. Many thanks.
-
I have been using GSAP on a recent web-site development to which I planned on giving a speed boost by applying the latest version of GSAP. I modified my code to support the latest changes in the API, but couldn't get the following code to work anymore. // worked on 1.6.4. // obj is a <img> node fetched with jquery obj[0].currentFrame = 1; var tLine = new TimelineMax({repeat:-1}); tLine.fromTo(obj, animationDuration,{currentFrame:1},{currentFrame:parseInt(fc)+3, onUpdate:animation, onUpdateParams:[obj], ease:Linear.easeNone}); Previously this tween set and changed the currentFrame property accordingly, but 1.8.x doesn't. Did I miss something down the line? Thanks, -Teemu
-
I'm noticing that TweenLite keeps looping over some functions, even though no tweens have been initiated. Firebug's Profile shows that there are 4 functions that keep running, on lines 278, 830, 227 and 703. (TweenLite.js, dated 29.1.2013) Is there a way to kill those timers? The load they cause is really minimal, but I'd like to clean them up anyways.
-
I'd like to have a fromTo TweenMax run a function prior to executing its animations to determine whether it should perform the animations or remain in its current state. The tween will always execute once, but repeat/revert animations should be governed by a function. I've tried playing around with onUpdate and .pause(), but am not having any luck. My code is looking something like this: onUpdateParams: ["{self}"], onUpdate: function(tween) { if (some_condition) { tween.pause(); } else { tween.play(); } }
-
Hi, I'm trying to tween a Raphael set: var atomH1_1 = paper.set(); var atom_Circle1 = paper.circle(10, 10, 25).attr({id: 'circle1','gradient':'70-#00CC00-#00FF00','stroke-width': '0'}).data('id', 'circle1'); var atom_Circle2 = paper.circle(20, 20, 25).attr({id: 'circle2','gradient':'70-#0000CC-#0000FF','stroke-width': '0'}).data('id', 'circle2'); atomH1_1.push(atom_Circle1); atomH1_1.push(atom_Circle2); tween1 = TweenMax.to(atomH1_1, 0.3, {raphael:{'tx':100,'ty':100,'scaleX':0.5,'scaleY':0.5},ease:Power1.easeInOut, onComplete:nextStep}); But it seems it triggers an error in GreenSock (): TypeError: c is undefined file:///E:/the%20Factory/Vialight/06_www/js/greensock/plugins/RaphaelPlugin.min.js Line 13 When I use the Raphael animate, it works fine, (but that's not what I'm looking for): atomH1_1.animate({transform: "t100,100"}, 1000); Is it not possible to tween Raphael sets? Or what am I doing wrong? EDIT : I sort of solved the problem by using multiple targets in GreenSock: var mySet = [atom_Circle1,atom_Char1]; TweenMax.to(mySet, 2, {raphael:{'tx':100,'ty':100},ease:Power1.easeInOut});
-
I have a button which inverts the colors on my website. It utilizes a plugin called rgb color - http://www.phpied.co...-in-javascript/ to get the color value of all dom elements, and invert them. I'm doing that with the code below: invertColors: function(){ var colorProperties = ['color', 'background-color']; //iterate through every element $('*').each(function() { var color = null; for (var prop in colorProperties) { prop = colorProperties[prop]; if (!$(this).css(prop)) continue; //if we can't find this property or it's null, continue color = new RGBColor($(this).css(prop)); //create RGBColor object if (color.ok) { //good to go, build RGB var element = $(this); $(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')'); //subtract each color component from 255 } color = null; //some cleanup } //end each for prop in colorproperties }); //end each } //end invert colors What I'd like to do is rather than just flip the color, tween it. I'm curious to try the greensock tweening engine. So supposedly, I should be able to make a call something like this: TweenLite.to(element, 1, {css:{prop:'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')' }, ease:Power2.easeOut}); but this is not working (no errors are thrown), so I'm not sure what I'm doing wrong. Anyone have any ideas for how to get this working, or what the proper way to tween all of these color properties would be?
-
Im new to all this and im sure what im after is very simple so can anyone help? I want a movieclips alpha to tween into alpha:1 stay like that for say 5 seconds and then tween back out to alpha:0 again. Can this be done in tweenlite? or do i need one of the other tweening platforms?
-
Hi, I am trying to create an application where cards flip in 3D using TweenMax to change the rotationY properties of a movieClip. However, I am noticing that if I tween a card in scale + rotationY (to "flip it up") and then tween it back down (to "flip it down") - it doesn't land in the exact position as it was before I "flipped it up." The application I am building requires precision on this because my cards will be in a tightly aligned grid, this difference is noticeable and unwanted. I have attached a sample of the issue - click on the lighter blue card in the center of the grid and then again to flip it back. Notice the bottom and right gutters between that card and the others is overlapped now - like the card nudged 1px right and down after tweening. If anyone has any thoughts? My gut tells me this is just the cost for using a plugin to tween (which by the way I LOVE these plugins) - but maybe there is some way to get more precision through TweenMax on the final placement of the MovieClip. Also - I know I can place an onComplete call to a function that resizes/positions my movie clip after it tweens, but I am hoping to avoid that. Many thanks in advance! CardFlip.fla.zip
-
Hi, I was implementing a tween based on CSS3's background-size today. That would map to "backgroundSize" as defined in CSSPlugin.js. However, the tween doesn't work in the latest Firefox. While it works perfectly in the latest Chrome. I digged down until I found about this condition in _parsePosition function in CSSPlugin.js: _parsePosition = function(v, o) { if (v == null || v === "" || v === "auto") { v = "0 0"; } Debugging this, I found that 'v' was passed in as 'auto' in Chrome. But it was passed in as 'auto auto' instead in Firefox. Since 'v' was not changed to '0 0' this leads to parsing problem resulting in 'NaN' in o.ox. And thus the effect doesn't work. My TweenMax code looks like something along these lines: controller.addTween( chart.offset().top, TweenMax.fromTo($('.bub', chart), .25, {css:{opacity:0, 'letter-spacing':'30px', backgroundSize:'0% 0%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'0px', backgroundSize:'100% 100%'}, ease:Quad.easeInOut} ), 0, -350 ); I patched CSSPlugin.js locally so that it now handles 'auto auto' case. The backgroundSize transition now works correctly on my machine. if (v == null || v === "" || v === "auto" || v === 'auto auto') { v = "0 0"; } Hope this helps. Not sure of any proper channel to report issue for TweenMax? Natthawut
-
I new to the GSJS and I am trying to tween the opacity of a div that as text in it. I have not been able to get the text to change with any css changes. Here is a sample of my code below. Could anyone tell me what I am doing wrong. Thanks. function init() { var title = document.getElementById("logoTitle"); var logoBar = document.getElementById("logoBar"); var subTitle = document.getElementById("subTitle"); var logoNumber = document.getElementById("logoNumber"); var nav1 = document.getElementById("s1navOne"); var nav2 = document.getElementById("s1navTwo"); var nav3 = document.getElementById("s1navThree"); var nav4 = document.getElementById("s1navFour"); var nav5 = document.getElementById("s1navFive"); var mainInfo = document.getElementById("mainInfo"); var logoTL = new TimelineMax({delay:.4}); logoTL.from(logoBar, .5, {css:{transformOrigin:"bottom", scaleY:"10"}, ease:Sine.easeOut}) logoTL.from(title, .5, {css:{alpha:0, marginLeft:"-50px"}, ease:Back.easeOut}, -.3) logoTL.from(subTitle, .5, {css:{alpha:0, left:"50px"}, ease:Back.easeOut}, -.3) logoTL.from(logoNumber, .5, {css:{alpha:0, marginTop:"20px"}, ease:Back.easeOut}, -.3) logoTL.from(nav1, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.3) logoTL.from(nav2, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav3, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav4, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav5, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.to(mainInfo, 1, {css:{alpha:0}}) <div id="mainInfo">This is the text I have</div>
-
I realise the AS command to repeat a tween action is repeat : number of repeats But where does this go in my code: import com.greensock.*; TweenLite.to(test, 2, {x:198, y:250, rotation:30}); TweenLite.to(test2, 2, {x:300, y:250, rotation:60}); Sorry for the simple question but I am fairly new to tween classes...
-
Hey folks - Here is what I've done: I've created an introduction animation for my tool Once animated, everything is in place and the too is ready for user interaction I've created a resize event so I can recalculate width/height of stage The resize event removes everything and re-runs the init() function to recreate everything I've captured the totalProgress time of each animation at the point of resize Here is what I'm trying to do: If the animation hasn't run at all at the point of resize, I'd like the animations to run as normal once the resize event is fired If the animation has run completely, I don't want it to run at all (i.e., totalProgress = 1) If the animation is anywhere in progress, I want the animation to skip to that point in the animation (e.g., 60%) Here's the problem: When I use code like this... var animation:TweenMax = TweenMax.to (obj, 1, {delay:1, x:50}) animation.totalProgress = _captured progress; ... the delay is totally ignored. Meaning if I have several successive tweens, they overlap each other. Is there a way to assign progress in TimelineMax? Any other ideas on how to do this?
-
Is it possible to tween properties of TLF textfields? Say I want to tween the tracking of a TLF textfield, How would I go about doing that? I tried giving an instance name to the TLF field and tweening the "tracking" property, but it returned a reference error # 1069 property not found. Any suggestions?
-
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!
-
I'm using autoplay=false to load a swf using SWFLoader. As expected, the swf is stopped during the timeline. Is there a way to make it play without knowing how many frames it has(without using the plugin "frame")?
