Search the Community

I'm half afraid to suggest this because it probably exists and it just didn't read the docs close enough, but I think it'd be really useful to have an overwrite mode that checks the assigned value of a tweened property, and doesn't overwrite if the value of one tween matches the value of another conflicting tween. For example, if you have 1 sec tween to Y position "10", and during that tween you call another 1 sec tween, also to Y position "10", the second tween could be ignored with this proposed overwrite mode. Could be useful when multiple UI elements effect the same targets and you don't want a stutter caused by successive tweens with unchanged property values. Hope that all makes sense.

hi, I made ​​an animation with the fingers of the characters , as you can see from my codepen . I used TweenMax.staggerFrom so you can move each finger with a small delay . but I have a problem, how can I say that the animation should begin from the beginning all together ? Now the animation starts from an hand per time , but I would to say that all the hands they need to start the animation of the fingers at the same time , without any delay. maybe it is better don't use staggerFrom for my scope? any help, suggestion or advice? many thanks

Hi All, I need some help to use Waving 3d shaded flag example. I want to filp left flag and bezier animation direction. Anybody can help me? Thanks in advance.

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

My son needed a way to record the data his weather station collected. This is the start of the interface I wrote for him. http://codepen.io/dotComb/pen/Gqdydw Hope this helps someone! -Dan

Hey folks, This is my first every question on the forum, so I hope to get some answers from some of you who are veterans and much more expert than I am. I've been using Greensock recently, specifically the TweenMax version. I have to say, GREENSOCK IS AMAZING! On to my question, this will be quick and should be fairly simple to answer, so here goes: How do I get an object to rotate in place after a button it is clicked, and then get it to reset and get ready to rotate again before the button is clicked again? I would really appreciate some help on this, and I have to re-emphasize that I really think GREENSOCK IS AMAZING! Thanks again folks!

Hey, I would like to create a matrix style code rain with GSAP using the SplitText Utility, but I've encountered an error when following your tutorial video. not sure what I'm doing wrong... any advice would be appreciated.

hi, I am trying to tween width and height with TweenMax in Adobe Animate CC: First frame script (in Animate CC): var root = this; // TweenMax.to(root.myBox, 1.25, {scaleX:2.0, scaleY:2.0, ease:Elastic.easeOut}); // --> works // TweenMax.to(root.myBox, 1.25, {width:"500px"}); // --> NOT WORKS TweenMax.to(root.myBox, 1.25, {left:"12px"}); // --> ALSO NOT WORKS ("myBox" is a name of movie clip on stage). Using: Animate CC Version: 15.1.0.210. TweenMax.min.js Version: 1.19.0 (also tried 1.18.2). createjs-2015.11.26.min.js. Thanks.

I've been using GSAP for a few months now. I'm currently using TweenMax in a project that allows users to set entrance/exit animations for HTML elements. I've written the code that adds each entrance/exit timeline to parent timelines. What I'm wondering, though, is whether there's a way to export all timeline/tween properties to JavaScript Objects or JSON, store the data, and subsequently import the data after reloading the webpage? In theory, this would prevent the need to create each timeline on the fly with each web request. Thanks to anyone who can help me out. I'm currently using TimelineMax together with CSSPlugin.

Hello! I'm trying to create a particle animation, something like this: http://i.imgur.com/OGpHy9m.gif The only thing difference is that i want each bubble to move a bit sideways as well. I found most of what i needed on the forum but now I'm stuck. As you can see in the codepen the bubbles move a bit but when the animation restarts it looks like a glitch, as i understand it, the bubbles start at their original x and y positions which is why that happen. I tried with yoyo set to true but that did nothing. I'm fairly new to Javascript so the code might not be best practice, feel free to correct me on this , always good to learn. Any help is much appreciated! Thank you

Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick

Hi All, I'm trying animate elements in an svg to fade in, once all the elements are visible, they will fade out after short delay and the animation will run again. Should I use onComplete? KJ

Hola forum... first time posting... please note I'm about 6 months new to using the JS version of TweenMax and I still am very much learning. I was a TweenMax user over in Flash for YEARS and am VERY grateful for what you've created in JS. You have created a wonderful tool! However, I've got a prob. I haven't put this in codepen as what I'm trying to get working seems to work just fine in straight HTML by itself... including in Safari, my problem browser (link below). A quick description of what I'm doing: I'm using a WP theme ('The Ken' created by Artbees) w/a fullscreen slideshow plugin. The slideshow is primarily images with the exception of one or two slides I'd like to add animated content to (all SVG). The way I load my animation is simply by placing an <iframe> in my slide content. This works beautifully in both Chrome and Firefox... but Safari and any browser in IOS renders my animation painfully choppy (nearly non-existent unless you stare at it closely... so I know it is 'working'!). This is a URL to the actual source being loaded up in the <iframe>... you'll see this runs wonderfully in any browser (including IOS browsers): http://aztacofestival.com/wp-content/themes/ken-child/main-slide-logo.html Here is the final Dev page in question: http://aztacofestival.com/arizona-taco-festival-2016/ There are four slides in the slideshow at the moment. Please click to slide 2—this is the slide in question. This page I'm developing uses TweenMax all over the place and it's working brilliantly (ie: top right 'We <3 Our Sponsors" is TweenMax. The testimonial roll in the boilerplate / footer area when the pages loads is TweenMax, and all the rollovers below the main slideshow (scroll down) are using TweenMax (again, working beautifully in all browsers). Please note that all my animations are triggered via their own functions. I've tried whittling back all my animation to just the main logo scaling and still have the issue (There is a lot going on. I figured the issue may have been that the animations combined are processor intensive... doesn't seem to be the issue as I have reduced this animation to 1 simple item and still have the issue). I'm worried this may come down to a theme issue... it's just that it's only occurring on Safari (and any IOS browser) that has me confused. Something strange you'll encounter in Safari: When you inspect the source via Safari's 'web inspector' the animations all begin to move / work. But only when in the inspector / rolling over the SVG items markup). Thank you in advance for taking a moment!

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { font-family: "Helvetica Neue", Helvetica; width: 90%; font-weight: 200; letter-spacing: 1px; margin: 25px auto 0 auto; background: rgb(234, 235, 235); color: rgb(25, 25, 25); } div, p { margin: 0 auto; } p { color: rgb(125, 125, 125); font-size: 0.85rem; text-align: center; margin-bottom: 17px; } div { width: 35%; overflow: hidden; } </style> <script type="text/javascript" src="./TweenMax.min.js"></script> </head> <body> <p> Refresh this page to re-run the demo. </p> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </div> <script type="text/javascript"> TweenMax.to("div", 1, { opacity: 0.5, width: "*=2", ease: Power1.easeInOut }); </script> </body> </html> above is the code i wrote,i want the width of my div move to 70%,and it does not work. But if i write:width:"+=300",it will work ,I don't know if i can write an expression in the tweenMax?my English is not very good, i hope someone can answer this for me!

Draggable.create("#myDIV", { type:"x", zIndexBoost:false, throwProps:false, onDragEnd:function() { TweenMax.to($("#myDIV"), 5,{css:{left: 0}}); console.log('DRAG END'); }, }); TweenMax.to($("#myDIV"), 5,{css:{left: 0}}); I wanted this to trigger every time drag ends, but this only animates only once and is not accurately goes to its original position

Hello, I'm trying to scale a div containing an image. The animation is alright and does what I want, but I have a strange blur during the zoom, and after the animation is complete, the image is focused again. I've linked my codepen, I don't know where it comes from, and I try some fixes, but none of them works. Thanks for help, Arthur

Hi, I created a polyline SVG curve. I am trying to a really simple tracing from 0% to 100% but I am not sure why it isn't working? Shouldn't it be as simple as: TweenMax.fromTo("#graphing", 2, {drawSVG:"0%"}, {drawSVG: "100%"});

I am using TweenMax to shoot to a certain point of the page like so: TweenMax.set(map.win, { scrollTo : { y: val } }); This goes to the wrong position but works properly elsewhere in my code strangely... for now I am doing this instead and works properly, but feels like a gimmick: TweenMax.to(map.win, 0.000001, { scrollTo : { y: val } }); Any help would be appreciated!

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.

I have a problem with my current code, it seems to big of a hassle to put in codepen and make it work since it has lots external files so i am only posting the relevant JS code. var tlAddDevices = new TimelineLite(); tlAddDevices.fromTo(desktopHome, devicesTime, {x: -100,y: 100,opacity: 1,display: "block"}, {x: -100,y: 170,opacity: 1,zIndex: -1,},0); tlAddDevices.fromTo(laptopHome, devicesTime, {x: -600,y: 170,opacity: 0,display: "block"}, {x: -420,y: 371,opacity: 1,},0); tlAddDevices.fromTo(tabletHome, devicesTime, {x: -0,y: 170,opacity: 0,display: "block"}, {x: -130,y: 429,opacity: 1,},0); tlAddDevices.fromTo(smartphoneHome, devicesTime, {x: -100,y: 400,opacity: 0,display: "block",zoom: 0.5}, {x: 0,y: 446,opacity: 1,zoom: 1,},0); tlAddDevices.fromTo(bmw1, devicesTime, {x: 0,y: -70,opacity: 1,display: "block",}, {x: 0,y: 0,opacity: 1,},0); var removeDevicesTL = new TimelineMax() removeDevicesTL.to(laptopHome, 2, { opacity: 0, x: 100 },0); removeDevicesTL.to(tabletHome, 1.5, { opacity: 0, x: 100 },1); removeDevicesTL.to(smartphoneHome, 1, { opacity: 0, x: 100 },1.5); var tl3 = new TimelineMax(); var showTextLength = 3; tl3.add("startDekstopSlideshow") .to(bmw2, transitionDuration, { opacity: 1}) .to(bmw3, transitionDuration, { opacity: 1 }) .add("showEIX") .to(iex, transitionDuration, { opacity: 1 }) .add("showWeekendDeals") .to(weekendDeals, transitionDuration, { opacity: 1 }) tl3.add("showDashboard") tl3.to(dashboard, transitionDuration, { opacity: 1 }) .add("end") var tlText = new TimelineMax() .add("Branded-Leads") .to(textSlides[0], transitionDuration, { opacity: 1, y: "+=100" }) .to(textSlides[0], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) .set(textSlides[0], { y: "-=100" }) tlText.add("Groot-bereik"); tlText.to(textSlides[1], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[1], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[1], { y: "-=100" }) tlText.add("Dashboard"); tlText.to(textSlides[2], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[2], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[2], { y: "-=100" }) tlText.add("Demo"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) //tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) //tlText.set(textSlides[3], { y: "-=100" }) tlText.add("endText") var mainTimeLine = new TimelineLite() .add(tlAddDevices) .add("set1","+=2") .add(tl3.tweenFromTo("startDekstopSlideshow", "showEIX"),"set1") .add(tlText.tweenFromTo("Branded-leads", "Groot-bereik"),"set1") .add("set2") .add(removeDevicesTL,"set2") .add(tl3.tweenFromTo("showEIX", "showWeekendDeals"),"set2") .add(tlText.tweenFromTo("Groot-bereik", "Dashboard"),"set2") .add("set3") .add(tl3.tweenFromTo("showWeekendDeals", "showDashboard"),"set3") .add(tlText.tweenFromTo("Dashboard", "Demo"),"set3") .add("set4") .add(tl3.tweenFromTo("showDashboard", "end"),"set4") .add(tlText.tweenFromTo("Demo", "endText"),"set4") When i use this code i expected the mainTimeline to play the sets in order but for some reason it seems to start with the last set (set4) and then start properly from set1 all the way to set4 and stop like i expect it to. Maybe i am misunderstanding this. I have all the imgs (iex bmw1 bmw2 etc) opacity set to 0 using css but they instantly appear. I will try later to create a codepen to replicate this but maybe it is possible to see my error via this code? EDIT: Added codepen demo

I wonder if anyone else got this error on Firefox... NS_ERROR_FAILURE ColorWheel Bug It seems to be a combo of TweenMax and SVG in Firefox in Mac and Windows. Chrome looks correct. There should be two color wheels on the bottom of the screen. Pressing and releasing them should select colors.

Hi there, I am trying to create the effect of one shape morph in width from target1 to target2. And then morph back from target2 to target1 using .reverse() However I am unsure why my .reverse() isn't working? Cheers, Venn.

I have the following code: window.onload = function() { var tl = new TimelineMax(); tl.to(document.getElementById("exit-button"), tt, {autoAlpha:1, ease:Power3.easeInOut}) } I'm loading tweenmax from the CDN. And on my localhost everything works as planned, but when I upload to the clients server I think they have some other scripts/ assets that are throwing the window.onload off. What can I do to avoid the error: "Can't find variable: TimelineMax"? HELP?!

Hi there, I am trying to build a project for work that is essentially a map based infographic. This is my first major project using Greensock so i am trying to do things step by step. First step. The icons that will display on the map. I have made these red in my example and was want each to open a box next to them. I was wondering the best way to do this? Of course at the moment when i click one they both open. Is the class best used to style in the css (e.g. .icon) and the id for Greensocks use? Any help is appreciated, Phil

Hi! I am a big fan of the tweenFromTo and tweenTo function of TimelineMax. However, these functions always return a TweenLite instance. Is it in any way possible to make that a TweenMax? I would very much like to have access to repeat and yoyo properties, for example. In other words, something like this would be cool: myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } ); (Or, maybe I'm missing something and this is already possible?) myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } );