Search the Community

Hi, I am having a problem animating multiple icons with all of them hovering at once. I have tried each() etc. but can't seem to crack it. Ideally I would like to have it that on hover the timeline iconHover plays and then reverses when the mouse is taken off. Any help would be much appreciated, Phil

Hi, is there a way to change the value of the timeline after the page has loaded? For example, i have a responsive website we're working on and i need to split two panels together on the page 50/50. when i reach a certain breakpoint the spilt percentage of each needs to change to something like 60/40. Is there a way to update the values after the page has loaded? Thanks, Sam

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?!

Hello, i can't fix the problem of the time line rotation the between the cw and ccw direction when the text is "c" ! I tried different value but nothing changed ! I can not reinitialize the timeline thx for your help !

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 } );

Quick question - if it possible to add sound effects to a GSAP timeline?

Hello, I need to make a slideshow that is part of a larger animation. The images need to fade in-out, move and scale in parallel. I achieved that effect, but my problem is that I can't repeat the cycle using the same motions, the transition from the last image to the first is abrupt. Any suggestions? EDIT: I searched the forum, and found some solutions with TweenMax, (http://greensock.com/forums/topic/8174-how-do-i-make-a-seamlessly-cycling-slideshow/?hl=timelinemax+slideshow) but I don't know if the moving and scaling effects are possible using those. Thanks

Hello everyone, I am currently creating a page that uses the GreenSock animation library to trigger animations as a user scrolls down the page. The interesting kink in this is that I need to swap out timelines I have created for the sake of responsive design (ie the animation graphics change to less complex ones when the page gets smaller.) This is a simplified test case from my actual page, but gets the same point across. The primary issue I am having is with using .pause() and instantiation of a new TimelineMax() that uses the same elements. For example, if I create a timeline with a Tween, and then pause it: var t1 = new TimelineMax(); t1.add(TweenMax.from($('#element1'), 1, { scale: '0.2', autoAlpha: 0, transformOrigin: 'center center', ease: Back.easeOut }), 0); t1.pause(0); // reset to beginning and hold, don't play yet. I can then play the animation back later on using .play() or .restart() and it works fine. However, let's say I never actually play the animation, and then kill this timeline, and attempt to create a new one that attaches to #element1: // so, instead of t1, we want to run t2 instead, so kill t1 t1.kill(); // create t2 instead var t2 = new TimelineMax(); t2.add( TweenMax.from($('#element4'), 2, { x: '-5px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element3'), 2, { x: '-10px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element2'), 2, { x: '-20px', ease: Power2.easeOut }), 0) .add( // Note element1 is reused here TweenMax.from($('#element1'), 1, { x: '-5px', y: '20px', scale: '0.2', autoAlpha: 0, transformOrigin: 'left bottom', ease: Back.easeOut }), 0.5)) // attempt to run t2 t2.play(); In this case, t2 will never run the animation/TweenMax on #element1 if t1 never left the paused state. However, if t1 was ever actually played with t1.play() before the t1.kill(), t2 will work successfully. I'm not sure how this works internally with GreenSock or if there is a better way I should be changing out animation timelines on the same objects. This only seems reproducible if .pause() is called, and .restart() / .play() is never called on the timeline originally containing (in this case) #element1. Does anyone have a workaround or a better method for me? I've been banging my head on this for hours and have come to the conclusion it's either post here or start digging into GreenSock source.

Please note that I'm heavily editing my pen, so I just put some code below too. Sorry if this is a silly question, but is my assumption in the comments below correct? That I can set ```transformOrigin``` in the constructor as a default fallback property? Yes, I realize that it would be the normal way, but don't have time to set up a test and I'm being lazy hehe function targetReady() { var tl = new TimelineMax(); //If I pass a property to constructor like this origin: //var tl = new TimelineMax({transformOrigin: "center center"}); //Is my assumption correct that this will be an overridable default fallback, such that any .to, .from, etc., that supplies it's own will take precedent? Also, if it supplied a svgOrigin property...would that take precedence over transformOrigin set in the constructor? //Trying to "DRY up" this sort of redundant setting of transform origin: tl.addLabel('targetReady') .from(finger, .7, {opacity: 0, x: -400, ease: Linear.easeNone}, "targetReady-=.5") .from(circleStroke, .7, {opacity: 0, x: 400, ease: Linear.easeNone}, "targetReady-=.5") .to(finger, .1, {scale: .99, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(circleStroke, .1, {scale: .98, y:1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(finger, .1, {scale: 1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .to(circleStroke, .1, {scale: 1, y: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .from(glass, 2, {opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2") .to(circle, 1, {scale: 30, opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=1") .set(circle, {scale: 0, opacity:0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2.2") .to(circle, .5, {scale: 1, opacity: .4, transformOrigin: "center center", ease: Power2.easeOut}, "targetReady+=2.4") .to(uxTest, 2, {opacity: 0, scale: 0, svgOrigin: "center center", ease: Linear.easeNone}, "targetReady+=3") .from(checkmark, 2.5, {opacity: 0, scale: 0, transformOrigin: "center center", ease: Back.easeOut.config(1.7)}, "targetReady+=4.5") return tl; }

Hey guys! I´m having a little distortion in my mainScene when i add repeat:-1 to its timeline. When repeat:-1 is added to the mainScene timeline the animation changes, in particular the "thirdsetScene". I hope somebody can help me with this little issue, making the manScene run as it should with repeat:-1 to loop infinitely. Thanks, thanks and thanks!

Hi This is part of a bigger animated timeline but I just put the part where am stuck. I'm stuck on how to reverse and play a timeline based on a mouseover event because they keep stacking on top of each other. As per the codepen example: The 'Main Title' staggers in, staggers out and the first div loads (expertise01). If you hover over any of the 'Sub - Titles', it reverses the timeline on the currently loaded div and plays the requested div. Note on mouseout, I'm hoping to have the div stay in place until another mouseover event occurs. Appreciate the help.

Hello, i'm new to GSAP please help, i'm trying to do this simple animation It works, but when I step into another window linked with same animation It stop working, doesn't start. (pd my english isn't good enough) <?xml version="1.0" encoding="utf-8"?> <svg class="skt8" width="48" height="48" x="0px" y="0px" xml:space="preserve" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> .kt1{fill:#FFF;scale:0; opacity:0;} .kt2{fill:#FFF} </style> <g> <path id="aa" class="kt1" d="M20,9.5h-3V18h-5v-6.4H8V18H3V9.5H0L10,0L20,9.5z"/> </g> <g> <path id="ab" class="kt1" d="M10.4,8C8.2,7.4,7.5,6.8,7.5,5.8c0-1.1,1-1.9,2.6-1.9c1.7,0,2.4,0.8,2.5,2.2h2.2c-0.1-1.8-1.1-3.4-3.2-3.8V0 H8.6v2.2C6.7,2.6,5.2,3.8,5.2,5.8c0,2.3,1.9,3.5,4.6,4.1c2.5,0.6,2.9,1.5,2.9,2.4c0,0.7-0.5,1.8-2.6,1.8c-2,0-2.8-0.9-2.9-2.2H5 c0.1,2.3,1.7,3.5,3.6,3.8V18h2.9v-2.2c1.9-0.4,3.5-1.5,3.5-3.6C15,9.6,12.6,8.6,10.4,8z"/> </g> <g> <path id="ac" class="kt1" d="M11.9,10.7c1.8-0.7,3-2.5,3-4.5c0-2.7-2.2-4.9-4.9-4.9S5.2,3.5,5.2,6.2c0,2,1.2,3.7,3,4.5 c-3.4,0.5-7.8,2.2-7.8,5v3.9h19.5v-3.9C19.8,12.8,15.3,11.1,11.9,10.7z"/> </g> <script type="text/javascript"> <![CDATA[ new TimelineMax().to('.skt8 path', 1, {scale:0,transformOrigin:"50% 50%"}); new TimelineMax({repeat:-1}) .to('#aa', 1, {scale:1, opacity:1}) .to('#aa', 0.4, {scale:1, opacity:0}) .to('#ab', 1, {scale:1, opacity:1}) .to('#ab', 0.4, {scale:1, opacity:0}) .to('#ac', 1, {scale:1, opacity:1}) ]]> </script> </svg>

Greetings. First of all i'm really sorry if it's a so much newbie question; i was searching forum and other sources -maybe with wrong keywords - but i couldn't find a proper solution. Thanks in advance for all your help. I'm using Flash CC to create a html export. I've a mc in canvas and inside of that mc there's a simple timeline animation done with flash. What i want is controlling that timeline with "frame" option like tl.to(exportRoot.mc, 1, {frame:0}); also with rewind etc. Thank you very much.

Dear All, First let me thank you for any help you can provide and let me explain what the situation is like: I have a number of elements/symbols/bitmaps that I set up on my flash stage (there can be as many as 30 elements) I place the first 5 on stage one under another and the rest outside the stage, on top, so I create the rolling effect. I have an array that I save all the element names in so I know which element is next etc. Currently I construct the spin using Timelinemax and I spin it User sees the first 5 elements and then it spins until the last 5 elements which I bounce a bit on finish ( I will provide the AS3 code after) Here is when I need YOUR help. The user will be able to press a STOP button. Meaning I would like to shorten the animation in this way: Let's say the number of elements is 30. And the user presses STOP when the animation is showing elements 10-15. I want AS3 to insert at elements 16-20 my ORIGINAL last 5 elements (so basically elements 26-30). So the animation remains smooth and it stops at the same elements as it would stop if the user has not pressed STOP Basically I would like to shorten the animation strip and replace the last 5 elements to match my original 5 elements. I do not want to jump to the end of the 30 element animation because then the elements on stage (10-15) will change to elements #20-25 and the user will see this. In a more visual way, to understand better: My original strip is 1,2,3,4,5,...,26,27,28,29,30 Strip starts animating User presses STOP when on stage you see elements 10,11,12,13,14,15 Animation now how to reconstruct the strip like this: 1,2,3,4,...,15,26,27,28,29,30 So after element 15, it will be element 26 and animation will get ready to stop I hope I made the problem clear, it has been bugging me a lot lately to find a solution and I hope someone can help me from this forum. If you need more information please let me know Thank you again.

Hello I have a simple timeline set up with 6 steps, no nested timeline or anything, and each step has a label. At the moment I can tween to and from labels (while watching the animation play out in either direction) by using tweenFromTo. The problem with that is some steps are quite long, and I'd like to go from one step to another in a defined duration. Is this possible? For example, can I tweenFromTo label1 to label3 within X amount of seconds? The closest thing I have come across is setting a timescale to a high number, but that's not really a solution and it'll be inconsistent as the time between each step varies quite a bit. Thanks for any help

Hi everyone First, shout out to Diaco and rest of the Greensocks heroes. Thank you. I've enjoyed working with your script and all the answers you've provided here have been most useful. My WIP http://goo.gl/RWzDCK the js in the site is not yet optimized. I'm optimizing it on my local server. And here are the questions. 1) I'm animating a timeline of objects. Since there are other instances of these objects being used later on, I'm defining them before using them in my timeline. The problem is, there are some objects that are being generated based on conditions (for example, ".pencils") . Meaning some objects are only implemented in to the page in some cases. But when they do, they are animated within these timelines. So, when I define them before hand and call them in timeline later on, I receive "Uncaught Cannot tween a null target" if they are not present in the page. Is there a way to if(pencil) in timelinemax ? IF not, should I leave them as ".pencil" instead of pencil 2) Im currently animating several timelines and all time lines are animating sprites. In some cases, some timelines are either fired simultaneously or within few frames from eachother. In pcs and laptops onviously animations runs smootly but I start to see some lags (not cutout lags but like stutters ) in tablets and phones. I'm now trying to optimize the script but if there are any general tip on animating for mobile devices would be welcome. 3) I'm creating cookies and checking them in document.ready. This way, I would like to fire animations once every few day (since they are basicly small animation movies). Based on whether the cookie exist or not, I'm loading one of the two style sheets. They both have same elements but different images. StylesheetA has sprite images where else StylesheetB has static (and waay smaller), one frame images. So if cookies exist. No animation is fired, and only the static image is loaded. However, this approach causes more than half of the images to fail loading with errors stating the images are corrupt. After 2 week of trying to solve (changing ftp client since I'm thinking, the ftp client is corrupting images while uploading them) this problem, I've found out that the error is not due to images being corrupt but browsers are over encumbered loading styles and trying to get all the images.at the same time.Since, I dont receive the same problem when I leave stylesheets intact in the head. Is there a better way to overcome this problem? Any suggestion on the matter is welcome. Thank you

Hello, First of all thank very much for this incredible tool! I am an absolute noob developing animations (and web pages) and thanks to GSAP I've had to do so little efforts to learn . I am trying to rotate a image and control the animation, very similar to the Ferris example: http://codepen.io/GreenSock/pen/wBbKs?editors=1010 The user can select if the rotation is clockwise or counterclockwise. This is my question: is it possible to do a infinite reverse loop without TimelineMax, just a TweenMax instance? The problem is that, related with this rotation, I am drawing a sine wave based on the tween progress. However, when TimelineMax reaches onReverseComplete or onComplete, a small lag can be checked in the sine wave drawing, distorting the result. I do not find this lag if I use only TweenMax, but I am not able to do a reverse infinite loop only with TweenMax... Thank you in advance!!

Hello, I am trying to reproduce the banner section from this website: https://www.triprebel.com/. In the codepen file (http://codepen.io/valiz22/pen/rerwxL) I have what I succeeded so far. Could anybody help me? Thank you!

Hi I create TlimeLineMax image gallery animation. refer below code. "tl.add(TweenLite.to(img1, 1, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));" animation was work perfectly. but grayscale is too fast. how can i slow this grayscale aniamtion. Thank you.

Hi Guys, I'm creating a website where I have to animate (approx. 50) svg lines from bottom to top of the screen in different tempi. I made it with staggerFromTo, but then I can't randomnize the the speed of each lines (se the attached image). Now I'm trying to create this with a for loop where i add tweens to a timelineMax, but I cant get it to work var thinLineArr = []; var num = Math.ceil(ww/lineThickness); transitioncontainer.css({'height':wh}); // Adding all the lines to the scene var svg = '<svg id="transition-top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg">'; for (var i = 0; i < num; i++) { var line = '<path class="transition-line" d="M ' + (lineThickness * i) + ' 0 l 0 ' + wh + '" />'; thinLineArr.push($(line)); svg += line; }; svg += '</svg>'; transitioncontainer.append(svg); //Starting Scrollmagic var timeline = new TimelineMax() for (var k = 0; k < num; k++) { timeline.add(TweenMax.from(thinLineArr[k], 2, {scale: 0})); } var scene = new ScrollMagic.Scene({ triggerElement: "body", duration: 1000, offset: 100 }) .setTween(timeline) .addTo(scrollMagicController);

Hi guys This is probably painfully obvious to you - but I'm learning! https://beer-interactive-ani.webflow.io/bundle1-play See the navigation on the left fading from top to bottom ... all I want to do is create a seamless loop. At the moment it's waiting for the tween to end before restarting again - how can I set it so it loops perfect before waiting??? Thanks in advance!

Hello! I want to stop playing a timeline at a certain point if on the last repeat, for example.. var TL1 = new TimelineMax({repeat:1, repeatDelay:2.5}); TL1.set("#banner", {visibility:"visible"}) .from('#copy1', 1, {top:-20, scale: 0, ease: Power4.easeInOut}) .to('#hero', 1, {top: 250, ease: Power4.easeInOut},'-=1') .from('#group-logos', 1, {top:-15, scale: 0, ease: Power4.easeInOut}) .from('#cta2', 1, {top:40, scale: 0, ease: Elastic.easeOut.config(1, 0.75)},'+=0.5') .from('#hero2', 1, {left: 300, ease: Power4.easeInOut},'+=1'); // don't do this if on the last repeat

Hi everyone, This is my first post here. First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for. Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations. The problem: When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it can also be seen in the CodePen I provided, when I have a SVG element with its children elements, if I want to animate the children elements in the middle of a timeline two things will happen. 1) The SVG elements animation order will be missed up and will not work correctly. 2) The animation on the standard HTML elements will not wait for the SVG elements animation to be finished. In other words, the animation on the standard HTML elements registered after the SVG elements will be started on the same time as the first SVG element's animation. I have reviewed the order and timings several times and I think they are correct. I have also written the code several times from scratch to make sure that I am not messing anything up. It would be really nice if you can figure this bug out and release a new bug-fix version. I am currently working on a project and I really need this feature to word correctly. Thanks in advance.

Started using GSAP a few weeks ago and I'm loving it. So easy to make amazing animations. So I have an animation for the main page of my website, but for some strange reason, part of it is running backwards in Safari. It starts with a strokeDashOffset animation for the outline, the fades in the fill by raising the fillOpacity. It runs wonderfully on Chrome, but somehow, the first part of the animation runs backwards in Safari. The strokeOffset starts at 0 (i.e. the outline is present), then slides out, and THEN the fill fades in. So only part of the animation runs backwards, not the whole thing. Any thoughts? I'm not familiar with posting on codepen yet, but I can do that soon if needed.

I want to make a small animation just for fun, but as I make it, I notice it doesn't play. Can someone please help me?