Jump to content

Search the Community

Showing results for tags 'tweenmax'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I'm getting an error that I'm not understanding. I'm trying to animate a kinetic line, however, the line is not animating and I'm getting the following error: TypeError: s.charAt is not a function TweenMax.min.js: 16 Why am I getting this error? I've attached my javascript file. script.txt
  2. I just found out today that there was this "startAt" parameter that finally solves my problem with constantly setting starting values for properties. Unfortunately, it doesn't seem to work as expected when there are delays. Maybe I'm going about this the wrong way. Example: TweenMax.to(mc, 0.6, { scaleX:1, scaleY:1, delay:0.7, startAt:{scaleX:0,scaleY:0}, ease:Elastic.easeOut }); There is a 0.7 delay there. I would expect the startAt parameters to be used right away, not after the delay. Does this make sense? Is there an alternate way to do this? Otherwise I'm stuck setting the start property values like I always do. ie: mc.scaleX = mc.scaleY = 0; TweenMax.to(mc, 0.6, { scaleX:1, scaleY:1, delay:0.7, ease:Elastic.easeOut }); thanks, rb
  3. I'm trying to randomize some settings in a tween. The first time it gets random values, but each iteration thereafter is identical. function RandomTween(e,o,w,h){ TweenMax.to(e, 0, {x:(int(o.left*w)), y:(int(o.top*h)),rotation:getRandomArbitary(1.05,6.25)+"rad"}); TweenMax.to(e, getRandomArbitary(0.5,5), {y: o.animation.to.y*h,repeat:-1,x: o.animation.to.x*w,force3D:true, rotation:getRandomArbitary(1.05,6.25)+"rad",ease:Linear.easeNone,onComplete:function(e,o,w,h){ RandomTween(e,o,w,h); },onCompleteParams:[e,o,w,h]}); } /** * Returns a random number between min and max */ function getRandomArbitary (min, max) { return random() * (max - min) + min; } var seed = 1; function random() { var x = Math.sin(seed++) * 10000; return x - Math.floor(x); } Am I missing something here?
  4. I was wondering if anyone could help me with an issue involving TweenMax and Easeljs. We're nearing completion of a game built in EaselJS, and just in the device testing phase. We're finding on some lower end devices, such as the iPhone 4 (iOS7), that whenever the framerate drops from our standard of 24 to around 18 or less, any TweenMax tweens currently running will appear to run at an incredibly low framerate compared to anything else. Other non-tweened movements will continue as you would expect at the framerate drop, but we'll only see as little as three frames in any one TweenMax tween - the start properties, maybe one or two frames somewhere in the middle, and eventually the end properties applied to the object, and that's about it. Very odd. It makes it look like the game is struggling much more than it actually is, as everything not tweened is often running at a reasonable rate. Originally we added an event listener to TweenMax's ticker, telling it to update the canvas on tick but this resulted in a lot of performance issues, as it was trying to update the canvas more often than it needed to. So now we just update the canvas on the EaselJS ticker update. I've since tried setting the TweenMax ticker's fps property to whatever the current easel framerate is, and this is adjusted each frame. This generally improves the animation speed of the tweens quite a bit, but they're still not updating as smoothly as any other animations we have playing on screen during these slightly more intensive moments. The canvas is continuing to update fine, so it seems to be that TweenMax isn't updating the values as frequently as it should be. Does anyone have any idea what might be happening? Is there a relatively easy way to manually update the progress of the tweens, so that the canvas ticker and the TweenMax ticker can be properly synced? Thank you
  5. Im pretty new to tweenmax, and i was wondering how to create an mouseover effect like seen on this page (hover over the images) : http://www.fcinq.com/ (scroll down to the work) They are using this in the css: transform: scale(0.25, 0.1); transition: background 0.3s linear 0s, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s; and on the hover: transform: scale(0.7); transition-delay: 0.2s; However, I have no idea how to do this in TweenMax?
  6. Hi, i'm working on a site using SuperScrollorama. My site has 6 big png-24 + alpha that are animated like this: // slide0 controller.addTween( '#slide0', (new TimelineLite()) .append([ TweenMax.fromTo( $('#sprite1'), 1, {css:{left:50+"%", top:170, scaleX:1.0, scaleY:1.0}}, {css:{left:30+"%", top:150, scaleX:1.2, scaleY:1.2}, ease:Quad.easeInOut}), TweenMax.fromTo( $('#sprite2'), 2, {css:{left:80+"%", top:230, scaleX:1.0, scaleY:1.0}}, {css:{left:50+"%", top:230, scaleX:1.1, scaleY:1.1}, ease:Quad.easeInOut}) ]), 0, // scroll duration of tween 0 ); On my computer, it's fast and fluid (perfect on IE 11 and Firefox, slower on Google Chrome). But on my iPad 2, it's a disaster : very very slow !! I tried with png 8, 256 colors + transparency. It's a little bit better. I tried the Superscrollorama on the iPad, and i noticed that's it's not very smooth. So my questions : - is it a processor problem / graphic card problem? - how to get perfect smoothness on iPad? Does anyone has a website example that i can test? Thanks for any help.
  7. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Feature lists are nice, but they can get lengthy and they don't always tell the story in a way that's relevant to you as the developer or designer in the trenches, trying to get real work done for real clients. You hear plenty about theoretical benefits of CSS animations or some whiz-bang library that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is exceedingly cumbersome or there frustrating "gotchas". You need things to just work. .project-post p { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .project-post h2 { padding-top: 16px; margin-bottom: 10px; } .expPoint, .project-post .expList li { font-size: 1.1em; list-style: none; line-height: normal; margin: 0px 0px 0px 8px; padding: 6px 4px 4px 20px; position:relative; border: 1px solid rgba(204,204,204,0); } .expPoint, .expContent { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .expPoint:hover, .project-post .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0px; overflow: hidden; color: #656565; font-size: 0.9em; line-height: 150%; font-weight: normal; margin: 5px 0px 0px 0px; padding-top: 0px; } .toggle { width:6px; height:8px; position:absolute; background-image:url(/_img/toggle_arrow.gif); background-repeat: no-repeat; left: 9px; top: 12px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } #featureAnimation, #featureBox { background-color:#000; border: 1px solid #333; height: 220px; overflow:hidden; line-height: normal; font-size: 80%; } #featureAnimation { position:relative; visibility:hidden; } #featureBox { position:absolute; } #featureAnimation, #featureBox, #whyGSAP, .featureTextGreen, .featureTextWhite { width: 838px; } #whyGSAP, .featureTextGreen, .featureTextWhite { text-align: center; } #whyGSAP, .featureTextGreen, .featureTextWhite { font-size:50px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; top:0; } .featureTextGreen { color:#91e600; font-weight: bold; } .featureTextWhite { color:white; font-weight:normal; } .star { position: absolute; width: 16px; height: 16px; display: none; } #browserIcons { top:64px; left: 100px; width: 92px; height: 92px; position: absolute; text-align:left; } #browserIcons img { position:absolute; } .featureTextMinor { color:#CCCCCC; font-weight:normal; font-size:20px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; visibility:hidden; } .dot { position:absolute; background-color: #91e600; } #ctrl_slider { position:absolute; width: 725px; height:10px; left:18px; top:196px; background: rgba(80,80,80,0.3); border:1px solid rgba(102,102,102,0.5); visibility:hidden; } Why GSAP? Performance Compatibility Other tools fall down in older browsers, but GSAP is remarkably compatible. Scale, rotate & move independently (impossible with CSS animations/transitions) XNJYHQLJYQEW CSS, canvas libraries, colors, beziers, etc. Total control pause(), play(), reverse(), or timeScale() any tween or sequence. GSAP The new standard for HTML5 animation replay
  8. Hello, I am consecutively rotation a series of object on the stage and I am initializing them by setting their rotationY to -65 and then rotationY to zero. The problem I am having is that objects from left to right are not starting from the same rotationY position. Some look to be less rotated than others. The interesting part is that from right to left the rotation lenses as if they are all in some sort of unified perspective. Can anyone please shed some light into this? Thank you in advance.
  9. I'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code: <script> window.onload = function(){ var tl = new TimelineMax({repeat:2, repeatDelay:3}); tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) ); tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) ); tl.add( TweenLite.from(season2, 1.5, {alpha:0}) ); tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) ); tl.add( TweenLite.to(packshot, 2, {alpha:1, ease:Power4.easeIn}) ); tl.add( TweenLite.to(holiday, 1, {alpha:1}) ); tl.add( TweenLite.to(starts, .75, {alpha:1}) ); tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) ); } </script> Is there a more optimized way to load these? I know that window.onload = function(){ isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct? Also right now I'm pulling in the entire TweenMax library in this manner: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script Is there a way to only load the select things that I need and therefore save on file size? Please advise. Apologies for the noob questions! Thanks in advance for any help!
  10. The two tweens below fade in a group of divs, but the problem is each fades in with more time between the last as it progresses (almost like it's exponentially slowing). And both tweens below fade in the first two divs at the exact same time with no stagger (hence "faking" it with the delay on the second). Any idea why? How can I get a group of divs with the same class to fade in, one by one, with the same uniform delay between the first two and the rest? Thanks in advance! /* this one doesn't work in a linear fashion */ TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+ " .hotSpot"), 1.5,{opacity:0},{opacity:1},2); /* this one doesn't work in a linear fashion */ var tl = new TimelineMax() tl.add(TweenLite.to($(".courthouse"), 1, {opacity:1})); tl.add(TweenLite.to($(".hospital"), 1, {opacity:1,delay:1})); tl.add(TweenLite.to($(".jail"), 1, {opacity:1})); tl.add(TweenLite.to($(".park"), 1, {opacity:1})); tl.add(TweenLite.to($(".cafe"), 1, {opacity:1}));
  11. Hi guys, I was wondering if is possible use the LoaderMax to load a video, than get this content and send it to a another video player, like the FLV Playback from flash. How can I do that? It's possible? Tnx a lot
  12. 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
  13. 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...
  14. 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!
  15. 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.
  16. After updating from 12.0.16 to 12.1.1 (including 12.1) - updateTo no longer works.. First call for the tween uses this (which still works): tweenMap = new TweenMax(grid, 0.001, { tx: newX, ty: newY, onComplete: grid.donePanning, ease: Quad.easeInOut }); repeated calls (dragging) then use this (which no longer works): tweenMap.updateTo({ tx: newX, ty: newY, onComplete: grid.donePanning, ease: Quad.easeInOut }); Reverting back to 12.0.16 everything works ok. Looking at the change diff - there are a number of updates in 12.1. Any idea what might be the underlying issue?
  17. 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 !
  18. 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.
  19. 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}});
  20. Howdy! First of all let me apologize if this is issue has been dealed before, I couldn't find out where Well, this is my trouble: I followed the tutorial in this url, but I can't manage TweenMax and get this error: Uncaught ReferenceError: TweenMax is not defined I load this libraries at the markup's bottom: <script src="jquery-1.9.1.min.js"></script> <script src="TweenLite.min.js"></script> <script src="TweenMax.min.js"></script> <script src="EasePack.min.js"></script> <script src="CSSPlugin.min.js"></script> <script src="main.js"></script> The main.js has this: $(document).ready(function(){ animPieza1(); } function animPieza1(){ var pieza1 = $("#html1_pieza1b"); TweenMax.to(pieza1, 1, {opacity:0, repeat:-1, yoyo:true}); } Any idea? Best!
  21. 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"
  22. 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.
  23. 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.
  24. 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.