Search the Community

I have this issue where I'm tweening a solid element and while the tween is animation there's a weird white line on the right bottom of the element. Once the Tween is complete the white border disappears. The weird part is that it's only visible on safari (mobile and desktop). Please see the code pen for simplified example. PLEASE HELP!!!

Hello Again The following works nicely var tl = new TimelineLite(); var $frame1 = document.getElementById('frame1'); var $txt1 = document.getElementById('txt1'); var $txt2 = document.getElementById('txt2'); tl.set($txt2, {opacity:0}) tl.add( TweenLite.to($frame1, 1, {alpha:1}) ); tl.add( TweenLite.to($frame1, 1, {backgroundColor:"#ff6a6a"}) ); tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}) ); tl.add( TweenLite.to($txt2, 1, {alpha:1}),"-=2" ); tl.play(); It works: my last timelinelite addition happens with intended overlap. But what if I would like to have the alpha begin to fade out as I shrink the text of the same object. This won't work: tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}, "-=2.5") ); I tried with a few different values just to make sure it is not the numbers. Is there a way I can do an overlap in tweening of the same object: should I perhaps default to the old skool delay method here and so not put it as a timelinelite parameter but "bake it in with the TweeLite. Thanks again .S, over coffe

Here is another question How come that I can tween CSS properties directly without using the CSSPlugin. The below works. var $frame1 = document.getElementById('frame1') tl.add( TweenLite.to($frame1, 3, {backgroundColor:"#ff6a6a"}) ); tl.play() Am I missing something obvious here? If so, when should the CSS plugin be used since the above works in any case? Thanks in advance .S

I'm trying to create a rudimentary slideshow prototype that plays html container slides, loading their matching gsap animation definitions - on a temporary timeline on the fly, playing it, and then removing it (hide method, l326). The pen has two slides, when you play forward/backwards, the animation plays as expected - as the same timeline animations/properties are played back/forwards on navigation. But when you press the "jump to 1st" button on the second slide (which disrupts the linearity by playing "in" instead of reverse out) tween values that are not changed from 1 between the two timelines (the blue and red box's scale) remain unchanged (0.65, from the "out" animation). How is this possible? If you look at the above method, the timeline is invalidated, the element properties cleared... how was the 0.65 scale from the "out" animation retained? (sorry for the complex example code, had to chop down a larger code, I hope the above description is clear enough)

i have a little carousel and its not tweening to the full duration. i have the tween time set to '0.5' when you click on the "<" button the first 2 times it works, the 3rd time theres no animation as though the duration is set to '0' same if you click on ">" first 2 times its good, 3rd not tweening. am i setting something up wrong? thanks

Hiya - this is my first question, and I hope it's not too dumb. I stumbled across Greensock while fiddling with Edge Animate. However, I'd like to hand-code some of this stuff. Unfortunately, I have virtually zero experience with Javascript. (I did take a class about then years ago, and I vaguely remember some concepts, but that's about it.) My familiarity is with plain-old HTML & CSS. My goal is to try and reverse an animation. Nothing spectacular. However, I don't even know where to start. I'm sure I can cut & paste and tweak, but I'd like a more solid basis. Am I in the wrong place? Thanks! J.

Is it possible to animate a curved line with GS? I want to draw a green line starting from point A to point B with a bezier curve? visual example:

Im trying to achieve a smooth repetitive up and down "floating" effect on x amount of elements - each element with it's own id. After a little while of "floating" the up and down tweening seems to get sluggish. (my real test uses 5 x 100kb images that has been preloaded before tweening) Im using one function to define the up tweening and another to define the down tweening and then throw each element back and forth these two functions. Any suggestion on how I can achieve the same effect more efficient and perhaps even in some smarter way without the two functions are very welcome! My bet is there some "bottleneck" there and that I can perhaps do some simple re-usable timeline instead? Follow the Codepen to see the concept of it

Hi guys, I have a simple tween that tweens the opacity and scale of an element. It's made up of a number of child divs, some with with background images TweenLite.fromTo(elm, 1, { scale: 0, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); Here's a video showing the problem. https://plus.google.com/photos/117519930315665299724/albums/6016203100500855073/6016203101346895106?pid=6016203101346895106&oid=117519930315665299724&authkey=CNaF7OT_gJGA1QE @0:01 - The above tween is run @0:04 - I run another tween which just returns the scale and opacity to 0 @0:10 - I set the elements display property to none @0:15 - I set the elements display property to block @0:19 - Tween scale and opacity to 0 @0:23 - Tween scale and opacity to 1 So at @0:15 it's rendered correctly. but again @0:23 is not again. I assume this is actually a browser issue, it doesn't think i needs to redraw the element after the scaling. The odd thing is though that if I only ever scale from .5 instead of 0 then there are no rendering issues. TweenLite.fromTo(@elm, 1, { scale: .5, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); (it's all fine on chrome desktop)

Hi Guys, I'm wondering can you give me a little help. I'm using TimelineMax within and for loop and the animations are being messed around... basically it looks like everything is being scarmbled CODE: for(var i:uint = 0; i < attackEnemiesToAnimate.length; i++) { enemyToTrack = attackEnemiesToAnimate[i]; createAnimation(enemyToTrack); if(enemyToTrack.x == stage.stageWidth - 20) { attackEnemiesToAnimate.splice(i,1); this.removeChild(enemyToTrack); enemyToTrack = null; } enemyToTrack = null; } private function createAnimation(e:Enemy):void { var tl:TimelineMax = new TimelineMax(); tl.to(e, 0.5, {x:stage.stageWidth - 100, y:50},1).to(e, 0.5, {x:pirate.x, y:pirate.y},2).to(e, 0.5, {x:-stage.stageWidth - 30, y:-stage.stageHeight - 10}, 3); e = null; tl =null; } Any Suggestions Cheers, John

Hi, Im just getting started and am excited about the prospect of a new door to flash. However, I am stumped right off the bat going through "Getting Started" for Tweenlite. I downloaded TweenLite for AS2. Created a test folder. Put the com folder inside. Created a test fla. I imported the classes as was instructed on the first frame of the timeline: import com.greensock.TweenLite; import com.greensock.*; import com.greensock.easing.*; TweenLite.to(poly_mc, 1.5, {x:100}); I created a polygon called poly_mc, and also named the instance poly_mc. I extended my timeline in the event it needed 1.5 seconds of frames to run the animation. Nothing happened. No errors either. Am I doing something wrong? I'm on Flash CS6, but wouldnt imagine it matters since it's AS libraries.

Hi - In the video it shows how you can animate between Home, Schhol, Work and Movies. Labels on the stage. I am trying to do this in Flash CS6. I have 4 buttons, and 4 labels with a Flash Tweened animation. I can not find any downloads in Flash and am a bit stuck. Can ayone point me in the right direction please? http://active.tutsplus.com/tutorials/animation/timelinelite-ultimate-starter-guide-introduction/

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.

Ok I have an idea for a game that is similar to the old lights-out game. I have done it before in Java and even on Android. But I want to do it in flash now. My delema is I want to use images for the buttons, each is a different color. I am looking for a way to dynamically change button colors. So when you press/click a button it will work through a set list of colors. I am trying to find the lite-st way to accomplish this. Maybe a multi-layer button, where I could tween a color layer, if that could even be done. If I could animation going I can handle the rest. Any help would be appreciated. Thanks, cH

Hi there I'm using the scrollorama plugin to achieve some fairly simple pinned animations, and the plugin works extremely well. However, I'm trying to use the scrollTo plugin to provide a simple navigation for users to scroll with animation to the critical point in each animation, and this is the part I'm stuck on. If anyone can provide any guidance on how to determine the way to scroll directly to a certain point in a pinned animation, I'd greatly appreciate it! Thanks.

Greetings, I'm currently in the process of choosing a transform tool and I've narrowed it down to three: GreenSock, Sencoluar, or Boceto. Some questions I have about the GreenSock tool: 1) How easy is it to make modifications, for example "skin" the controls appearance? I'd like to use a vector image for my resize/rotate handles rather than the generic blocks and I'd like to get rid of the rectangular box. I like that Senocular's controls are easy to derive a class from an individual control and just override the draw method. Is that easy to do with Greensock too? Are the methods that draw the controls exposed for overriding? I'd like to make transitions to future versions of the base code as easy as possible, but I foresee fairly heavy modification so I'm looking for something where I can use OOP principles to isolate the base functionality from my derived code. 2) Are their any integrations between the Transform tools and the Tweening/Timeline tools? I'd love to, for example, be able to "record" various transform states and save tweens between those positions to a timeline. Functions in the tweening tools that would let me add a transformitem derived control to a timeline and create a tween to it's current position (from the last recorded position) would be extremely useful, for example. If not currently available, is this a possibility for the future? 3) I notice that SVN access is mentioned for the tweeningtools but not the transform tools. Some form of version control would really make handling updates easier for me (especially if I end up having to modify the base classes). Is source control access available for easy upgrades? 4) Any other comparison or comments on features that differentiate these tools are appreciated. One pro for the Greensock tool that comes to mind is multiselect (and it appears to be very well supported 5) Are there public Roadmaps for the TransformTool anywhere? Thanks! --scotru