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. Hi everyone, I use TweenMax and Draggable (GSAP 1.15.0) with RequireJS for a project. My require config is : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', }, shim: { Draggable: { deps: ['TweenMax'] } } }); It works like expected. But i have problem during the minification step with the r.js tool. The compiler looks for the TweenLite file, but doesn't find it. I have found in this thread http://greensock.com/forums/topic/7213-using-timelinelite-and-tweenlite-with-requirejs/ that I can set the paths like this : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: 'TweenMax' } }); But now the error is that the TweenMax file is not found. If I do directly require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: '../../local/js-vendor/gsap/src/uncompressed/TweenLite' } }); it works as expected. But TweenLite is packaged two times (inside TweenMax + TweenLite directly) A workaround is exclude TweenLite with the compiler options. requirejs: { compile: { options: { paths:{ 'TweenLite':'empty:' } } } } I don’t know if there is a better way to fix the problem, but for the moment it works for me. Hope it helps. And I’m all ears if someone has a best solution.
  2. I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.
  3. function mouseOUT(e:MouseEvent):void{ TweenMax.to(menu_MAIN, 2, {rotation:"360", ease:Linear.easeNone, repeat:-1}); } function mouseOVER(e:MouseEvent):void{ TweenMax.killTweensOf(menu_MAIN);; } Hi guys, here is a little problem I have and cant figure out how to solve it say I have a clock hand @ 12 o'clock which rotates constantly until I MOUSE_OVER it, what I am trying to do is when I MOUSE_OVER it I want the clock hand to always stop @ 12 o'clock no mater when I MOUSE_OVER it. Thanks for your help in advance Steven
  4. Quick question. I'm trying to use TweenMax to (smoothly) tween the borderColor property of my TLFTextField from one uint to another, and have had no luck so far. I can't quite figure out where to go from here: TweenMax.to(textField, 1, borderColor: ?? }); Any help would be appreciated. Thanks in advance! Jacob
  5. Hi guys, so about a year ago i used teenmax v 1.12, and it worked fine. I updated to the latest version somehow the same code doesn't work anymore. Can someone point me to the new changes in the codes. Or maybe if my code is wrong. Thx. TweenMax.to($("#cover"), 5, {css:{alpha:0}}) The above is the code. If i replace v 1.14 to the old version, somehow it works. By the way i'm using this in adobe Air HTML.
  6. Hi, Maybe I did smthng terribly wrong, but I think I found an issue in GSAP 1.14.2. play('label1') doesn't work correctly. If I use the GSAP version: beta 1.8.2 it does. Thank you! Grtz Dennis
  7. Hello, I'm developing a banking app where users can transfer money, pay bills, etc. The app is entirely free to download, no ads or something like that. What license should I use? And do I need a bussiness license if the user is charged a little amount from the amount he want to transfer, like paypal. Thanks!
  8. Hi all, Wonder if you could give me a workaround on this issue: On Homepage, have created cards that use Tweenmax to animate when user clicks on the cards, The cards overlay other cards when clicked. It all works fine, but when we test in browser (chrome, firefox, etc) with zoom activated ( ctrl + mouse wheel scroll ) which activates the browser zoom it breaks apart the animation. When the cards are clicked the cards which are meant to overlay the other cards dont show anymore. Sorry hope this makes sense. Would appreciate any help. Cheers
  9. rgfx

    Animating Timescale

    Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.
  10. Hi, I'm looking at animating an Absolutely positioned (in the center) to specific percentage on the left-margin. I can get it to work as long as the marginLeft isn't set before hand other than in the CSS, but when the element has that left-margin style inline and then I tween to say 4%, it jumps all the way to the left and then moves the 4%. I have a codepen setup, if you comment out the marginLeft and marginRight and only have that set in the CSS it works correctly. Am I thinking about margins (and absolutely positioned elements) incorrectly? http://codepen.io/kaplan/pen/rmKzG Thanks, Dave
  11. Using: TweenMax 1.14.1 The TweenMax docs say that setting TweenMax.defaultEase sets the default easing on TweenMax tweens. As far as I can tell, it doesn't work. Instead, it seems, I need to set TweenLite.defaultEase. (I've also noted that the default for TweenMax.defaultEase is undefined, but the default for TweenLite.defaultEase is Power1.easeOut.) It seems like this is a bug either in the docs or in the code.
  12. Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.
  13. TweenMax.to player, len * 2, { bezier: { values: pathValues }, onUpdateParams: ["{self}"] onUpdate: (val) -> console.log val } If pathValues is an array [{x: 0, y: 80}, {x: 100, y: 200}] , is there a way to check which value in a path is a current bezier segment? I have a character that should follow a path and I need it to look forward one step in path, in order to change its animation texture. Here's a demo: http://iccthedral.github.io/2014/10/10/PIXI-ex1.html - Right click on a tile moves the knight (or whatever) to that position.
  14. var dial:Sprite; var radius:Number = 0; var angle:Number = 0; var angleConvert:Number = 180 / Math.PI; init(); function init():void { makeDial(); makeOrb(); } function onMove(e:MouseEvent):void { angle = Math.atan2(mouseY - dial.y, mouseX - dial.x); volumeMC.rotation = angleConvert * angle + 90; } function onOrbDown(e:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove); stage.addEventListener(MouseEvent.MOUSE_UP, onOrbUp); } function onOrbUp(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove); stage.removeEventListener(MouseEvent.MOUSE_UP, onOrbUp); } function makeDial():void { dial = new Sprite(); var g:Graphics = dial.graphics; g.lineStyle(2, 0x333333); g.drawCircle(0, 0, radius); dial.x = 170; dial.y = 370; addChild(dial); } function makeOrb():void { volumeMC.buttonMode = volumeMC.useHandCursor = true; volumeMC.addEventListener(MouseEvent.MOUSE_DOWN, onOrbDown); } Hi I have a volumeMC dial that drags and drops great, but I want to use the rotation snap in tweenMax to make this better. All I want it to do is .... 1] drag rotate volumeMC around its own centre from 0-360deg in 10deg intervals. 2] to trace the current rotation value to I can adjust the sound. here is what I have that works but I don't like it ... hope someone can help Steven
  15. Hi all, I've searched and searched to no avail for help with my problem. I need to be able to pause some animations while others continue to play. And then resume them again when needed. And this needs to be done with TweenMax (I cannot use TimelineMax). And AS2. Ideally, there would be an easy way to create a function that I pass the movieclip location & whether or not it should be paused. Something sort of like this? public function pauseMC (MC:MovieClip, State:Boolean):Void{ if (State){ MC.pause (); }else{ MC.resume (); } } Thanks for any help! -Zach
  16. my code is below the TweenMax skew doesn't work when I add a second line of code altering the skew in waterSkew function. It works fine when the second line of the waterSkew function is not in there. import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([TransformMatrixPlugin]); //CHANTEL Timeline variables var cMoveTimeline:TimelineLite = new TimelineLite(); function init():void{ waterSkew(); cMove(); } function cMove():void{ cMoveTimeline.to(C,2,{x:166.9, y:479.55}); cMoveTimeline.to(C,1,{x:166.9, y:467.7, rotation:5}, "+=.15"); cMoveTimeline.to(C,1,{x:163.3, y:471.25, rotation:-5}, "+=.25"); cMoveTimeline.to(C,1,{x:166.9, y:467.7, rotation:5}); cMoveTimeline.to(C,1,{x:166.9, y:479.55, rotation:-5}, "+=.25"); cMoveTimeline.to(C,1,{x:170.5, y:469.5, rotation:0}); } function waterSkew():void{ TweenMax.to(water, 8, {transformMatrix:{skewX:1, skewY:-1}}); TweenMax.from(water, 8, {transformMatrix:{skewX:1, skewY:1}}); } init();
  17. I've created a few animations that run simultaneously along a bezier curve and stop at different points along the path by utilizing another Tween to control progress. Everything animates perfectly, but I keep getting the following error in my console: TypeError: a is undefined a._lazy = false; TweenMax.js (line 6097, col 6) Looking into the source it seems that this has something to do with the new "lazy" rendering feature released in 1.12.0 http://greensock.com/gsap-1-12-0 Any ideas as to what's going on here? Here is my code as it pertains to this issue (Only loading the TweenMax.js library): var trajectory_path = [ {x:0,y:0}, {x:0,y:-73.6},{x:-58.2,y:-133.2}, {x:-130,y:-133.2}, {x:-201.8,y:-133.2},{x:-260,y:-73.6}, {x:-260,y:0}, {x:-260,y:76},{x:-189.7,y:133.2}, {x:-117.9,y:133.2}, {x:-27,y:133.2},{x:58,y:51.6}, {x:58,y:-50}, {x:58,y:-151.6},{x:-13.7,y:-218.4}, {x:-100.6,y:-245.9}]; var rockets = $('.rocket'); var full_duration = 20; var full_progress = .9; var contest_progress = 1; // as float percentage rockets.each(function(i,rocket) { // Create tween on bezier curve var progress = parseFloat($(rocket).attr('data-progress')) * full_progress; // Get this from data attribute var duration = full_duration * contest_progress; // This should reflect the contest week and not the trajectory distance var t = TweenMax.to( rocket, full_duration, { bezier:{ type: 'cubic', values: trajectory_path, autoRotate: 90 }, paused:true, ease: Linear.easeNone, } ); // Animate TweenMax.to( t, duration, { progress: progress, ease: Linear.easeNone } ); });
  18. Hello, I'm working on cleaning up some legacy code so it can be unloaded from the parent SWF and ran into an issue that when any TweenMax function is called within a child SWF (eg. TweenMax.killAll(), just that, nothing else is called), it blocks the child SWF from being unloaded. The same issue cannot be repeated when instead of TweenMax I use TweenLite or TweenNano. Using advanced telemetry Adobe Scout just shows that TweenLite initializers are not garbage collected. As a note, the parent SWF also uses TweenLite. The child SWFs are loaded into the parent in the same application domain and security domain using LoaderMax. I am using * VERSION: 12.0.0 * DATE: 2013-01-21 of TweenNano and * VERSION: 12.1.5, * DATE: 2014-07-19 of TweenMax (the latest package) Any ideas as to what might cause this are appreciated. I would upload the scout session files but those are ~14mb each, instead I can offer dropbox links: https://dl.dropboxusercontent.com/u/15108424/EvoWrapper/EvoWrapper-collected.flm https://dl.dropboxusercontent.com/u/15108424/EvoWrapper/EvoWrapper-notCollected.flm
  19. Hi, I am working on a project, in which I am trying to move 12 SWF files simontaneously with the help of (TweenMax.allTo). but when I try this in browser, many frames are skipping during movement. size of each SWF is 2500X2400 px and I'm using 4 MB jpg image in SWF as backfround. Code : TweenMax.allTo([CONTAINER_1, CONTAINER_2], groundFriction, { x:xPos, y:yPos} ); Both the containers are containing 6 SWF files. xPos and yPos is calculating dynamically on keyboard key down event, and I am using ENTER_FRAME to move the canvas. If someone knows how to deal with it, please help me. Thanks in advance.
  20. Hi, so i want to activate this animation: http://codepen.io/jaxi123/pen/zuylB/ whenever someone scrolls to it, using scrollmagic. I've tried but just cannot get it to work, all help is appreciated.
  21. With CSS 3 I am able to use keyframes, which makes animating objects really flexible. For example, with keyframes I can change a object opacity from 0 to 1 at 50% of the animation and then back to 0 at 100% of the animation... that creates a smooth fadein and fadeout. I am trying to accomplish the same with gsap. With TweenMax I can set a fromTo... but how, would I go about doing a fromTofrom? I tried doing something like this: var mydiv = new TimelineMax() .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:0, scale:0}, {opacity:1, scale:1})) .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:1, scale:1}, {opacity:0, scale:2})); However, when using "add", there's a very small delay between the first and the second add. How do I go about removing that delay? Or, is there another way of doing chained animations?
  22. Hi once again. i've created my site and am using tweenmax&lite scripts alot and i'm loving it. My problem is; i've installed a plugin called Revolution slider and this slider has tweenmax embedded into it too. And a minor (but crucial) animation in my page is not animating as it suppose to on the page this slider is being placed in. The animation is site wide, footer show&hide which you can see easly from this page. http://goo.gl/VDQqNt (please click Expand to see link on the bottom). As you can see, the footer slides in the window is positioned on the bottom. Now please check the same animation on this screen. As you can see the footer appears but the window wont move to the location. And this small bit is the headache that my clients are hell bent on giving me. I've contacted them and trying to solve this issue but i strongly suspect that this is the cause of the tweenmax scripts being loaded again and again. So my question is, is there a jquery no conflict equlivent for gsjp ? (since i'm assuming its conflicting some how) Also any suggestion on the topic is much apriciated. Lastly, this is the code i'm using var callback3 = function () { $("#main-content").css( { 'min-height': ($(window).height()) - 185 } ); $("a#footer-toggle-link").click(function() { var markerPos = $("div#copyright-line").offset().top; TweenMax.to(window, 2, {scrollTo:markerPos, ease:Quad.ease-Out}); }); }; $(document).ready(callback3); $(window).resize(callback3); Thanks alot.
  23. Hi I have a slideshow and it's good in all browsers except in chrome the animations are very laggy and slow and the speed is around 5 fps !! Here is my slider function : function slide() { var rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule if (scId == 1) {var color = "#2a2a2a"} else {var color="#f2f2f2"}; if (scId < currentslide) { TweenMax.to("#sc", 0.9, {left:scId * 45, ease:Power1.easeIn}); TweenMax.to('#slide' + currentslide, 0.9, {left:'100%', ease: Power2.easeInOut}); TweenMax.to('#st' + currentslide, 1.2, {left: '100%', ease: Power2.easeIn}); TweenMax.to('#slide' + scId, 0.9, {left:'0', ease: Power2.easeInOut}); TweenMax.to('#st' + scId, 1.2, {left: '11%', ease: Power2.easeIn,onComplete:defaultslide}); TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn}); TweenMax.to('#sc', 1, {backgroundColor: color, ease: Power2.easeIn}); } else { TweenMax.to("#sc", 1.1, {left:scId * 45, ease:Power1.easeIn}); TweenMax.to('#slide' + currentslide, 1.1, {left: '-100%', ease: Power1.easeInOut}); TweenMax.to('#st' + currentslide, 1.3, {left: '-=100%', ease: Power1.easeIn}); TweenMax.to('#slide' + scId, 1.1, {left: '0', ease: Power1.easeInOut}); TweenMax.to('#st' + scId, 1.3, {left: '-=89%', ease: Power1.easeIn,onComplete:defaultslide}); TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn}); TweenMax.to('#sc', 1, {backgroundColor: color, ease: Power2.easeIn}); } } the #slide is photos and the #st is the slide's text on the photos and #sc is a slide control for switching beetween slides. I recall this function every 6 seconds (except the first time that is 4 seconds) with this code : TweenMax.delayedCall(4, slideauto); function slideauto () { var slider = new TimelineLite(); if (scId==2){ scId=-1; } scId++; slide(); TweenMax.delayedCall(6, slideauto); } at first I thought it might be because of the large photos but it didn't make any change when I replaced the background photos with background color. then I removed this line of my code and the speed a little improved ( like 15 fps) but it's still too slow. TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn}); I want to know how can I optimize my code to run faster and smoother in every browser. Thank you.
  24. I am having some issues related to tweening HTML elements in 3d — specifically <li>'s in this case. I'm working on a site which is generated by PHP and have a menu generated for me of this type (the real menu is longer) <ul id="menu-main" class="menus menu-secondary sub-menu sf-js-enabled"><li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42" style="visibility: visible; opacity: 1; transform: translate3d(0px, 0px, 0px);"><a href="http://whatever.com/category/about/">About</a></li> <li id="menu-item-1350241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350241" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/search/">Search</a></li> <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/category/popular/">Popular</a></li> </ul> Wanted to fool around with some simple GSAP animation, and all works fine but I cannot get the li's to tween rotationX or rotationY within the jQuery hover callbacks. rotationZ works. If someone could point out the obvious point I'm missing I'd be grateful. initMenus(); function checkMenuItem(theTween) { if ($(theTween.target).hasClass('current-menu-item')) { tl = new TimelineMax(); tl.to(theTween.target,.25,{ease:Quad.easeInOut,scale:1.5}); tl.to(theTween.target,1,{ease:Bounce.easeOut,scale:1}); } } function menuover() { var tl = new TimelineMax(); tl.to(this,.25,{rotationX:'+=30deg',ease:Quad.easeIn,scale:1.5}); tl.to(this,.35,{rotationX:'-=30deg',ease:Quad.easeOut,scale:1.25}); } function menuout() { TweenMax.to(this,1,{ease:Bounce.easeOut,scale:1}) } function initMenus() { var tl = new TimelineMax({}); $('#menu-main li').css('visibility','visible'); $('#menu-main li ').hover(menuover,menuout); tl.staggerFrom('#menu-main li ',1.4,{onStart:checkMenuItem,onStartParams:["{self}"],alpha:0,x:"-=100",ease:Elastic.easeOut},.15,.1); }