Search the Community

Greetings one and all. Hopefully Christmas brought your family together. Thank you in advance. I have a need to update a dynamic text box when a new label is reached. The animation is a sequence of lines drawn, points reached and then the point animated, and an image faded. This all works quite nicely - Jack, your packages are _amazing_!! What I would like to do is as best I can explain: as each label is reached, a dynamic text box is updated with new text. On each new label created, would an "onStart" be apropos? And ... how would I populate the box? I've built dynamic text boxes that are stacked upon each other and when a new label reached, the old text box is alpha-faded out & the new is alpha-faded in. That seems wasteful and is certainly inelegant. My SWF is large, at 51 labels and with unrelated animation and content, but I've trimmed it down to 4 labels in the code below. Any help will be appreciated. import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; mc_ball.x = P1.x; mc_ball.y = P1.y; mc_map_uk.alpha = 0; var line:Shape = new Shape(); addChild(line); // timing variables ///////////////////////////////////////// var timer_tweek:Number = .8; var staticTimer_var:Number = 4; var image_fade_var:Number = .01; var point_bounce_var:Number = 3; ///////////////////////////////////////////////////////////// drawRoute(); function drawRoute () { var tl_drawRoute:TimelineMax = new TimelineMax(); ///////////////////////////////////////////////////////////// // add each line tween and label the insert point // draw using same time for each tween: tl_drawRoute.to(mc_ball, staticTimer_var, {x:P2.x, y:P2.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_1"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P3.x, y:P3.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_2"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P4.x, y:P4.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_3"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P5.x, y:P5.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_4"); ///////////////////////////////////////////////////////////// line.graphics.clear(); line.graphics.lineStyle(3, 0xFF0000); line.graphics.moveTo(mc_ball.x, mc_ball.y); ///////////////////////////////////////////////////////////// // insert dot tweens at the appropriate label // each tween has the same duration and will start when it's respective line tween starts tl_drawRoute.insert( TweenMax.fromTo(P1, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_1"); tl_drawRoute.insert( TweenMax.fromTo(P2, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_2"); tl_drawRoute.insert( TweenMax.fromTo(P3, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_3"); tl_drawRoute.insert( TweenMax.fromTo(P4, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_4"); ///////////////////////////////////////////////////////////// // image fades called at apporpriate label tl_drawRoute.insert( TweenMax.fromTo(I1, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_1"); tl_drawRoute.insert( TweenMax.fromTo(I2, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_2"); tl_drawRoute.insert( TweenMax.fromTo(I3, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_3"); tl_drawRoute.insert( TweenMax.fromTo(I4, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_4"); } function drawLine() { // trace("drawLine called"); } function testComplete () { // trace("test complete"); } Best, Steve

Hello, I saw some animation done with greensock js flavor... http://codepen.io/nrose/details/KrnGq Is this possible with as3 version? How can I create a animation to simulate a flag? Thank you...

Hi, Firstly, let me say a huge thanks to Greensock for providing such amazing tools over the years, I've been using your products since AS2 Tweenlite and they never fail to amaze me with their power and usability...thank you!! I have made a simple fiddle to demo the problem here : http://jsfiddle.net/x0b/cXR7L My situation is this: I want to have a main timeline that has 3 sections - an intro, a changeable middle section and an outro, in that order. Once the user has completed the middle section and the outro, they click a button and a new middle section replaces the current one, the rest remains the same. Once the button is clicked I pause(0) both the outro and middle section to reset their tweens, then kill them both so they get removed from the main timeline (incidentally - remove does not seem to do anything for me as the duration of the main timeline remains the same if I check it after doing remove - is this a correct behaviour?). Then I add the new middle section and the outro back to the timeline. The timeline is controlled by scrolling the output window and runs correctly initially; the green box moves down (intro) the blue box goes left 100px further than the yelow (middle section) and then they come back to their starting positions whilst the red box comes from 1000px to cover the green box (outro). The problems once the button is clicked are two fold 1) The intro runs ok, the new middle section runs ok, but then as soon as the timeline enters the outro, the blue box jumps out to 200px and the yellow box jumps to 100px. I guess this is because the outro tween has for some reason stored these values the first time it is run, even though it was killed. 2) If I invalidate() the outro timeline, the blue box glitch disappears but then the from tween does not work correctly, I presume this is because the invalidate means the timeline has forgotten where the from tween started from? So I'm kind of stuck between two problems and not sure whether I'm using the API wrong or the API can't do what I need. Can anyone please provide some insight? Thanks!

Ok I hoping someone can help me out. I'm relatively new to action script and TweenMax but have learned a lot over the last year. I'm using Flash Professional and I am trying to ease in a map when the map icon is clicked. Once the user is done they click on the map and the map eases out. This is set up by using two external classes names MapToggleOnClass and MapToggleOffClass. I have been successful in doing this from the document class but only partially successful in doing it from an external class. I say partially because I am able to get the ease out function in the MapToggleOffClass to work when the user clicks on the map. However, I have not been able to get the map to ease in when the map icon is clicked. All my symbols are MovieClips. All the instance names are correct and the instances are on the stage. The visibility of the streetMap instance is set to off at runtime. Using a trace statement I know that Flash is detecting when I click on the Map Icon (mapBook) but nothing happens. The symbol StreetMap is linked to the Class of StreetMap and the Base Class of the MapToggleOffClass. The Symbol Map Icon has the instance name of mapBook and has its class linked to the MapToggleOnClass. I know the linkages are correct because of trace statement when I click on the instance of mapBook. The click is registered but the Tween (easeIn) does not occur. The following is my code: package { import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenMax; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class MapToggleOffClass extends MovieClip { public function MapToggleOffClass() { this.buttonMode = true; this.addEventListener(MouseEvent.CLICK,hideMap); function hideMap(event:MouseEvent):void { trace("movieClip Instance Name = " + event.target.name); TweenMax.to(event.currentTarget, 1, {autoAlpha:0, ease:Back.easeOut}); } } } } and package { import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenMax; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import StreetMap; public class MapToggleOnClass extends MovieClip { var streetMap:StreetMap; public function MapToggleOnClass() { streetMap = new StreetMap(); this.buttonMode = true; this.addEventListener(MouseEvent.CLICK,showMap); function showMap(event:MouseEvent):void { trace("The link is working"); TweenMax.to(streetMap, 1, {autoAlpha:1, ease:Back.easeIn}); } } } } The main difference is the easeOut function uses "event.currentTarget" and the easeIn function uses streetMap as the object. One more thing.... in the action script settings I have automatically declare stage instances checked. What am I missing? Any help would be much appreciated. thanks in advance.

Hello everyone This might be a stupid question but i had to ask to better understand the JS API .. I know that when you include TweenLite.min.js in your page that you use the TweenLite constructor when using different methods in the API But lets say If i have TweenMax.min.js INCLUDED in my page: what is the best usage for using set() .. using the TweenLite or the TweenMax Constructor?Its been said in the forums that you can use either TweenLite or TweenMax IF TweenMax.min.js is INCLUDED in your page... so I was curious as far as performance and/or preferred usage.. which is appropriate to use if I have TweenMax.min.js included in my page? or can i use both using TweenLite: TweenLite.set(element, {x:100, y:50, opacity:0}); or using TweenMax: TweenMax.set(element, {x:100, y:50, opacity:0}); or can i use either or ??? Im sure that what Im asking can relate to other methods in the API, when i have TweenMax.min.js included in my page.. so any help will be highly appreciated thanks in advance !

Regards, Recently I am learning to use the GreenSock libraries and now I'm doing the animation of photographs column when clicking on a button that scrolls down. Apply a blur filter to give it a blur on the Y axis and I can not make this return to the original state, I mean, that would slowly diminishes blur filter and stops. I'm using TweenMax to animate with As3, the following piece of code is the one I use to make the animation, and the blur does stop abruptly and do not slowly returning to their original state. I hope I can help. thanks TweenMax.to(column, 2 {y:column.y ease:Quart.easeInOut, blurFilter:{blurX:0, blurY:20, remove:true}});

Hello, this is the best site since sliced-bread! I'm new to the site and was drawn to it from a youtube video that had GreenStock as an import. Anyway, I this tutorial https://www.youtube.com/watch?v=DUYFGXAtgqc and modified the code to place random Letters in the boxes with dynamic text. (the link above also has source file.) the code: import com.greensock.*; /** Alphabet collection */ var alphabet:Vector.<String>; /** Reset alphabet */ function reset():void { alphabet = new <String>[ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" ]; } /** Get random letter from alphabet */ function getRandomLetter():String { return (alphabet.splice(int(Math.random() * alphabet.length), 1)[0]); } /** Shuffle alphabet collection */ function shuffleAlphabet():Vector.<String> { var alphabetShuffled:Vector.<String> = new Vector.<String>(); while (alphabet.length > 0) { alphabetShuffled.push(getRandomLetter()); } return alphabetShuffled; } // get a random letter: reset(); var randomLetter:String = getRandomLetter(); trace("Can you find the letter: " + randomLetter + "?"); // display entire alpha shuffled: reset(); trace(shuffleAlphabet()); var numBoxes:Number = 160; var tl:TimelineMax = new TimelineMax({paused:true, onReverseComplete:playAgain}); for(var i:uint = 0; i < numBoxes; i++){ var boxTxt:BoxTxt = new BoxTxt(); boxTxt.x = 1200/numBoxes*i boxTxt.y = 800; boxTxt.alpha = 0; var alphabetShuffled:Vector.<String> = new Vector.<String>(); while (alphabet.length > 0) { alphabetShuffled.push(getRandomLetter()); var randomLetter2:String = getRandomLetter(); boxTxt.randomLetter_txt.text = "" + randomLetter2; } TweenMax.to(boxTxt.solid_mc, 0, {tint:Math.random()*0xffffff}) tl.insert(TweenMax.to(boxTxt, 1, {x:Math.random()*1200, y:Math.random()*800, rotationY:360, onComplete:deBlur, onCompleteParams:[boxTxt]}), i*.01); tl.insert(TweenMax.to(boxTxt, .1, {alpha:0.5, dropShadowFilter:{color:0x000000, alpha:1, blurX:5, blurY:5, strength:0.8, distance:2}}), i*.01); addChild(boxTxt); } I was able to the random text to appear in each box, but only random at run-time. each character was the same. Is there a way to get each box to display a different letter in each box in the same way the color is randomized using TweenMax.to. ? You help is greatly appreciated. hmm, this site would not allow me to upload the .fla file, so basically all you need is a MC in the library named "boxTxt" and within that dynamicText named "randomLetter_txt" over a graphics named "solid_mc"

I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated. Here is he snippet that makes the path and rotation: {bezier:{type:"soft", curviness:1.25, values:[{x:0, y:-200}, {x:300, y:-400}, {x:800, y:-200}, {x:1010, y:-300}], autoRotate:["x","y","rotation",1.5,true]} I can't provide the link to the source since it's a closed production environment but if it helps I can create a test page somewhere when I get some time. Thanks.

Why Tweenlite does'nt apply to ul:{jquery object, filled} the transformation in this case : TweenLite.set(ul, {css:{transform: 'translateY(-4000px)'}}); But this work as it should be with TweenLite: ul.css('margin-top', '-4000px'); JSfiddle description : JSfiddle I use the latest version of TweenJs. Thanks for your help.

Hey all, I currently have a header with some repeating background pattern. What im looking to do is make this repeating background pattern move towards right and bottom from a point of position: absolute; - in the same speed and in an infinite loop. You can see a dummy here - hope it somewhat illustrates what im looking to do: http://codepen.io/anon/pen/oapnB Initially my idea was to have it move in one direction first for like 10secs and then change to another direction - as the codepen illustrates. However lets just keep it simple: - Would anyone be able to tell me if im able to move my background pattern infinite in one direction? Right now I offset the background outside of the screen, so that I have some extra background to actually move around without it ending - im not sure how to adress that for an infinite solution - perhaps some resetting needs to be done? But in that case im not even sure how to do that so it looks in sync.

Hi, I am new to GreenSock and trying to use Draggable plug in of GreenSock. I have added the JS libraries in following order <script src="../../../js/jquery-1.10.1.min.js"></script> <script src="../../../js/jquery-ui.min.js"></script> <script src="../../../js/greensock/plugins/ThrowPropsPlugin.min.js"></script> <script src="../../../js/greensock/TweenMax.min.js"></script> <script src="../../../js/greensock/plugins/Draggable.min.js"></script> My HTML code structure is as follows: <div id="imageContainer"> <div class="galleryImg"></div> </div> I completely flush #imageContainer and add few elements, with class name galleryImg, to it dynamically. To make the imageContainer draggable I added following code in my JS Draggable.create("#imageContainer"); However, when I try to drag the element, an error is thrown and the element is not draggable. The error from FireBug is as follows: TypeError: i._gsTransform is undefined ...},this.content=o,this.element=t,this.enable()},H=function(i,n){t.call(this,i),i The error also occurs as soon as I click (mouseDownEvent) the imageContainer. Is there anything am I doing wrong over here ? Which JS files do I need to add to use Draggable? Where can I find standalone sample examples on how to use GreenSock plugins? (e.g. JQuery has this "View Source" link which can display full HTML to understand the whole example) Please guide.

The basic of my problem is that I am using superscrollorama to pin timelineLite animations and when I want to jump to another part of the html page going up works fine but going back down is slowed down, (the anchor points are offset by part of the pixel animation that is bigger then the image so links don't go to the correct point on the page), by the animation being done in the timeline. I was hoping for a good way for setting timeline animation to be complete but I have been having problems of goto a specific frame and such. I originally tried to unpin all the pins and put them back in but that doesn't seem to do what I wanted. So now I am trying to complete the animation before I scroll to it so it gets by the pins at the fastest rate. I know you guys don't go deep into superscrollorama but I am just looking for how best to complete a timelite animation to it's final frame from a click event. Any ideas would be helpful.

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 there. I'm trying to use TweenMax.to() in a starling app with the ease option of Circ.easeInOut while rotating a view. I used the same thing in a flash app and there was no problem. But in Starling, when the animation is about to finish, the view speeds up suddenly and then slows down. I guess it's because Starling only works with radians, and somewhere in the code TweenMax uses degree values. Same problem occurs between two rotating animations: I mean when the first animation is finished, a second one is called in the onComplete method and the same sudden speeding-up problem is seen during this transition. Any solution?

Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.

i have two frame to show, play aniframe, then will appear aniframe1. last time was working, but suddenly aniframe1 not working anymore. TweenMax izit not support this code anymore? TweenLite.to($(".aniframe1"), {css:{visibility:"visible"}}); Last time i was using this topic attachment file, to do revision. http://forums.greensock.com/topic/7624-animatein-animateout-example/?hl=animatein

Is there any way for all the timeline/tweens to reset back to starting position all at once and pause them there and wait until triggered to play/resume again except the currently triggered timeline? for example, I have 2 slides which identifies element if it was currently on the viewport and then fires the tween sequence inside a timelineMax. (don't mind the viewport identification as it was already done) I tried TweenMax.killAll(false, true, false); but what it did was, it pauses all the delayed and remaining tweens which leaves the current state of element. What I want is since these elements are came from autoAlpha:0, it will be set back to their starting timeline sequence and wait until being triggered again. That means when another timeline is triggered, it will abort all remaining tweens of the previous timeline and vise versa for both slides. The killAll scenario is, I can see the elements that are stopped and I don't want that. I want them to have all fresh entry everytime the sequence is triggered. I am sorry for this issue has been solved years ago. Sorry for opening same thread.

Not sure if this is me or not, so I wanted to check it out. I am more or less doing an animation with a sprite map. When trying to change the backgroundPosition in IE8 I get an error. But changing the backgroundPositionX and Y individually is fine. Here is my code: var flame = document.createElement('div'); . . . flame.style.overflow = 'hidden'; flame.style.backgroundImage = 'url("my_files/images/flame.png")'; var tl = new TimelineMax( { repeat:-1 } ); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); //no error in IE8 tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); //error in IE8 The error is: SCRIPT5007: Unable to get property 'backgroundPositionX' of undefined or null reference TweenMax.min.js, line 15 character 22204 Please let me know if I'm coding this wrong. Thanks!

Hello All, I am doing animation like this http://jsfiddle.net/g2kxL/. in phonegap 3.0 android. When my animation run for first time, animation is not smoother. and the quality of animation is almost 50% then 2nd time. After complete first loop completes it continuesly works fine. Any help would greatly appreciated.

Hi, I am trying to animate div with timeline max. I am following this procedure : - loop for total div elements with jquery's each - create tween for each div element with tweenmax - on complete of tweenmax reverse it - push tweenmax to tweens_array - add tweens_array to timeline max - on complete of timelinemax reverse it Problem : div is not tweening reverse it will come directly to origional position. here is this source code for refrence : CSS : div,body{ margin: 0; padding: 0; } .container{ position: absolute; height: 100px; width: 100%; top: 150px; } .column{ float: left; background-color: #00ffcc; height: 100%; width: 30px; margin-left:10px; border-radius: 5px; text-align: center; } HTML : <div class="container"> <div class="column column1">1</div> <div class="column column2">2</div> <div class="column column3">3</div> <div class="column column4">4</div> <div class="column column5">5</div> <div class="column column6">6</div> <div class="column column7">7</div> <div class="column column8">8</div> <div class="column column9">9</div> <div class="column column10">10</div> <div class="column column11">11</div> <div class="column column12">12</div> <div class="column column13">13</div> <div class="column column14">14</div> <div class="column column15">15</div> <div class="column column16">16</div> <div class="column column17">17</div> <div class="column column18">18</div> <div class="column column19">19</div> <div class="column column20">20</div> <div class="column column21">21</div> </div> JS : var tl = new TimelineMax(); var delayTween = 0.1; var tweenArr = []; $(".column").each(function () { tweenArr.push( TweenMax.to( this, 1, { y:-60, ease:"linear", onComplete:function () { this.reverse(); } } ) ); }); tl.add( tweenArr, '+=0', "sequance", delayTween ); tl.vars = { onComplete:function () { tl.reverse(); } } Any help would be greatly appreciated, Thanks in advance.

Hello i have a question, is possible add new tweens to a TimelineMax and reorder another on the fly (dynamically). Example: timeLine = new TimelineMax(); timeLine.add( TweenMax.to(".box1", 1, {left:100}) ).addLabel("box1"); timeLine.add( TweenMax.to(".box2", 1, {left:100}) ).addLabel("box2"); After in need add a new TweenMax after box1 but i need that box2 run after the box3 tween = TweenMax.to(".box3", 1, {left:100}); timeLine.add(tween, "box1"); timeLine.play(); RESULT: Currently the box2 and the box3 run at the same time. Another test, was get 'box2' tween and use UpdateTo() to add delay:1 but UpdateTo dont work with delays. Some idea?

I am having some basic trouble getting a div within a div to alpha tween on and off. Basically I'm trying to randomly change the text inside the div (it will be using a pictorial font so the image will change). The text changes, thus the timelineMax is working, but there is no tweening on and off -- no alpha tweening. I'll include the relevant js and css below -- if the full zip is needed, can do, but I'm sure it's something really simple I'm missing. I also noticed that storing the div in a 'global' variable -- grabbing it at the start with jquery -- wasn't working for whatever reason, and that's why I'm grabbing it each function. Thanks for pointing the errors of my ways. JS startRotateDiv(); function startRotateDiv() { var rotateDiv = $('#home_div div.content_image'); var tl = new TimelineMax({repeat:-1}); tl.add(setText); tl.to(rotateDiv,.5,{autoAlpha:1}); tl.to(rotateDiv,.5,{autoAlpha:0},"+=2"); tl.play(); } function makeid(len) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < len; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } function setText() { var rotateDiv = $('#home_div div.content_image'); var txt = makeid(1); rotateDiv.html('<div class="notice">'+ txt + '</div>'); } CSS .notice { font-size: 80px; font-family: 'noticenotice2'; color: red; background: url('http://media.npr.org/assets/news/2010/04/11/panda-f8a7c9331bbac776e52b26feeccc53de959f46d1-s6-c30.jpg'); }

Hello, I've got an animation of some objects looping through a bezier using the BezierPlugin. I want to fire a function to make the objects stop with an ease, wherever they are but along the bezier curve. Imagine a racetrack and there's suddenly a red flag, all the cars need to come to a halt all of a sudden. How would I go about that? I tried overwriting the tween but it just stops. Another question as well on how the bezier the plugin draws, how can I make it not start drawing the bezier from x:0 y:0. Say I want it to start on the middle of the stage instead. Thanks!

what is faster.. using jQuery css() method or GSAP set() method. for example: // GSAP way TweenMax.set($image, {'opacity':1}); // or jQuery way $image.css('opacity',1); I was wondering which is faster or better to use? Should i only use set() for the properties that will be animated? Im used to setting css properties via jQuery css() method .. but wanted to know if the GSAP set() method is faster or more efficient? Any help will be highly appreciated?

I want to tween first three items and then replace the 3 items(overwrite) with next three items for tweening and after that I want to overwrite next 3 : continue so on until the end of items and oncomplete, I want to repeat the whole process. I am using overwrite to overwrite the first three with next three but it doesn't work! Can someone help me with this? Is something wrong in my code? Any help will be greatly appreciated! CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }), count = 1;//the label number $('.tick').each(function (index, item) { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut, overwrite: "none" }, 'label' + count) count++; if(index % 3 == 2) { t1.TweenLite.defaultOverwrite = "all"; } });