Search the Community
Showing results for tags 'TweenMax'.
-
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
-
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
-
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.
-
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
-
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
-
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
-
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.
-
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
-
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 } ); });
-
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();
-
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
-
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.
-
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.
-
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.
-
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.
-
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); }
-
Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.
-
TweenLite.to(cloud_wrapper.find('.kr-line-timer'), openedSkyDurRemaining / 1000, { css: { width : cloud_wrapper.width() }, ease: Linear.easeNone, onComplete: function() { cloud_wrapper.find('.kr-line-timer').css('width', 0); } } ); The code above has big memory leak and memory is increasing by 1.5G for 5~6 hours and finally chrome crashes. If I remove this code, the memory leak issue is gone. cloud_wrapper has some elements has event listeners defined using jquery like following: cloud_wrapper.find('.kr-nav-arrow').on('click', function() { ... }); But it's not the object (kr-line-timer) used for TweenLite. Some people says I should remove listeners to fix memory leak issue. But If yes, when can I add the listeners again to accomplish my logic? If not, how can I fix this issue?
-
Hi, I am trying to animate two div in the same ScrollScene simultaneously but only once has animation, the second is not animated. I just made a fiddle for this problem, I have other ScrollScene before and after. Codepen URL: http://codepen.io/dhenriet/pen/qtsgi
-
TweenMax AS2 subload creates domain security warnings
Jakob Sternberg posted a topic in GSAP (Flash)
Hi MovieA.swf (contains no greensock classes at all) MovieB.swf (uses TweenMax) When i load MovieB.swf (online) from MovieA.swf (local) i get some warnings in the FlashEditor output. ( 3 x "MovieB.swf tried to access incompatible context "MovieA.swf") Using System.security.allowDomain("*") does not solve or affect the problem at all. Everything works as expected, i just wish to get rid of the warnings. I'm trying to streamline a small banner production framework for others/colleagues to use, and i'd rather have a "warning-free" setup =) -
Hi All, I've recently seen a javascript animation created on codepen: http://codepen.io/GreenSock/pen/bkLwt Problem is it doesn't work. I've tried creating it on codepen and locally on my pc. But it doesn't work. Are these features still available?
-
I'm using GSAP's TweenMax to scale a div when a user clicks on a button. However, what I want to do is be able to get the current scale value and/or know how to increment the scale value by say 0.5. This is how I'm setting the scale when the button is click: TweenMax.to(mapContainer, 0.4, { scale: 1.3}); So scaled to 1.3 over 0.4 seconds. So what I'm wanting to do is when a user clicks on that button again, it will scale it by an extra 0.5 each time. I've also asked this on SO as well if you'd like to asnwer on there as well for the benefit of anyone looking aorund: http://stackoverflow.com/questions/24181307/how-to-get-scale-value-using-greensock-animation-platform-gsap Thanks!
-
I'd like to understand the best way to do those 'hiding and showing" elements that are not in the HTML flow — for instance, the sort of thing where you slick on a form element and more choices appear underneath. I believe, from looking at the forums, that if you have an element that is hidden, and not in the flow, you set visibility:none,opacity:0 and then TweenMax.to(element, time {autoAlpha:1, visibility:block}) — but will this "slide" the element into place, that is both make it tween opacity as well as tween the other elements to make room? If not, what's the best way to achieve this? How does one make it hide again? Perhaps I'm not on the right track, but it's an ubiquitous internet visual technique, so I'm open for best practices how to achieve. Or perhaps one should simply keep the place occupied, have visible:hidden? — but then there are a lot of blank spaces, no? Any help appreciated, sorry if at all vague. -
Hi, First off, thanks for a great library. I've been trying to change a tween on the fly, specifically the x value for a DOM element. For some reason the updateTo method doesn't seem to work. Maybe because x is converted to a css value it is considered a plugin-value when used on dom elements? I've created this pen to illustrate the issue: http://codepen.io/klas/pen/eduhJ If you click the {x: 10} button before you play the animation the tween updates as expected. Any subsequent calls to updateTo after the animation has been played or scrubbed does nothing. The js docs suggests using the DynamicPropsPlugin but as far as I understand it is only available for AS. Not sure it's on the roadmap for js but I can definitely see a use case for it in responsive design. Cheers Klas
-
I've been playing around with TweenMax, using Scroll Magic JS plugin, and have yet to find a working example of an animation, where the element that will be animated, has initial CSS that is absolutely positioned to the right and bottom, come in from the right of the screen. CSS wise, I only see animations that use x (left) and y (top) coordinates. Is it possible to get an animation to come in from the right side of the screen? If so, can someone please point me to an example.
