Search the Community

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

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 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 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 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.

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?

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.

Hi, I am trying to create an accordion menu using Greensock. Alot of the code I have used comes from this section of the forum. http://greensock.com/forums/topic/9110-accordion-menu-with-gsap/ Two things different that I am trying achieve are: Making 'one' open on page load. Add padding inside the content areas. (Seems to still add padding when the sections are closed.) Any help is much appreciated. Cheers, Phil

I've given up and trying to figure this out by myself. Mostly because I want to get this animation finished. I am trying to line up the tweens 'line' and 'text' for the codeCatch timeline of the Master timeline. I want it to look like the text is attached to the end of the fishing line. It's almost there but I'm at a loss at how to fix this on my own. The animation of the 'line' and the 'text' was aligned until I started animating the rotation properties in the earlier timelines.

Hi there, I am attempting to restart the #counter in this codepen example once the timeline has finished playing. Ideally i would like to trigger the restart (20 secs) from the timeline. I added the onComplete: "resetTimer" which is queuing this function and it didn't throw an error so i am wondering if I am on to something? function resetTimer() { var seconds = 20; } Any help is appreciated! Thanks, Phil

I'm working on a digital signage system's content editor interface, which produces HTML5 pages. I've recently replaced the animation engine of these generated pages from pure CSS3 to GSAP and I'm experiencing some cases when the content animation has strong lag and freezes on our android devices, while on Windows/latest Chrome it runs well. I also tested some GSAP codepen demos on the android devices, and those run well, so I think I'm doing something wrong here, and would like to get some help. One of the devices I tested on (possibly the strongest hardware): http://www.gearbest.com/tv-box-mini-pc/pp_282317.html The example page: https://storage.googleapis.com/content.myshopdisplay.com/193/1377/8401/index.html About the code in the page: The page has a transform scale applied to stretch the content to full screen (this is not animated). The page first moves in letters one-by-one by animating the top and left properties, to make the word EURONICS. This runs laggy but still ok on android. After that a big background picture fades in by opacity animation, then 4 stars also appear on the right side by opacity animatin in a delayed sequence. The strongest lag happen when the big background picture fades in. It takes about 1 second on PC to animate that, and on android it takes about 30-60 seconds. Each page element has their custom CSS values in the inline style attribute. The animatin timelines are generated at the start of the page: I create a timeline for each element new TimelineMax({repeat: repeatAnimation, repeatDelay: 0, paused: true, smoothChildTiming: true}); Then I iterate over the style properties that should be animated (not all on an element's style attribute, I store the animated properties in a separate container), I create a timeline for each of these, this constructor function gets no arguments. After that I iterate over the time positions I stored. If this is the first value at position 0, I use the set() function: propertyTimeline.set(targetElement, valueObject, 0); If it's not the 0 position I calculate the exact duration of the tween and add it to the timeline with the to() function: propertyTimeline.to(targetElement, duration, valueObject); When all values processed for a property I add the property timeline to the element's timeline at position 0. The element's timeline contains only these property timelines. When this is done to all elements I iterate over all of the element timelines and call play(0) on them. I do not add the element timelines to a main timeline because they can have different length, and they can repeat, and they need the ability to restart at different times. It's understandable that too many effects can cause lag, but this page is not too effect-heavy in my opinion, so I'm clueless why is it so laggy. It is also very inconvenient that this lag actually extends the full duration of the animation, while with CSS iirc it only skipped frames when it was too laggy, but It finished the animation at the desired time (this is important for our system because these pages are being played one after one, and the pages change at a fixed time) What could be wrong here? Thanks in advance for your help! Roland

Hello ! I've created a timeline and add this specific tween. Everything work well when I fired myTimeline.play(); The problem is when I fired the reverse() function, open var doesn't decrease and stay at 31. Here the part of the code which doesn't reverse var tweenValues = { open : 1 }; myTimeline.fromTo(tweenValues, 2, { open: 1}, { open: 31, onUpdate:function(){ var srcCeil = Math.ceil(tweenValues.open); target.src = './img/img'+ srcCeil +'.png'; }); If any of you have an idea ? Thanks !

Hi all, If I am using the staggerTo() property to run through a series of elements, is it possible to "start" the stagger animation again before the original stagger is complete? I've tried using the repeatDelay property, but there's still quite a gap in-between the timeline restarting. $wave.timeline = new TimelineMax({ repeat: -1, repeatDelay: -4 }); $wave.timeline .staggerTo('.Employee', 1.5, { delay: 1, opacity: 1 }, offset, 'path') .staggerTo('.Employee', 20, { bezier: { type: "soft", values: bezierCurve }, ease: Power1.easeInOut }, offset, 'path') .staggerTo('.Employee', 1.5, { opacity: 0, delay: 15 }, offset, 'path');

Hi, Using GSAP TimelineMax for a 360 rotate loop animation; On window resize, I can't seem to keep the element centred; I've got a live link here http://codepen.io/helderoliveira/pen/wGBBmm If the page is refreshed, the instance when initialised at that point, has the element aligned properly. Only on window is resized, it breaks; So, I've tried to use the method "kill()" and also setAttribute style and removed any css styles from there; create a new instance, but it breaks, making the animation super slow; I wonder if there's a solution for this. Any tip is appreciated! Thanks!

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.

Hi there, I'm building a custom collapse navigation. See codepen: http://codepen.io/anon/pen/GZKmaR The 'nav' element needs to toggle two classNames. If its collapsed (by click), and if its animating(by timeline). Some how, the 'collapsed' class will not be removed if you close the navigation. If i remove the +=animating classnames in the timeline, it will work.. Of course, i can rebuild the HTML and toggle the className on another element to fix this issue, but i dont want that Does anyone has the same issue and is there a simple fix?

Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil

Hello again. I decided to create a new Topic here for my problem (link here), so I dont pollute the JS Forum (more than I have so far). I also wanted share a solution and ask if its the right way of doing it. So let me start with the problem from the previous Topic. ------------------ part 1 - the problem ---------------- The problem is that the code (listed below) is working fine for JavaScript, but when I try to do the same thing with AS3... I fail (maybe the problem is in me). Here is what I have : var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var tl = new TimelineMax({repeat:1, yoyo:true}); tl.to(myMovieClip, 5, {x:500, ease:Linear.easeNone}) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0); (I know that myMovieClip is unnecessary but to be sure that the problem doesnt come from something like "the problem is that the provided displayObject doesnt have a Timeline". PS: I also tried addressing rectangle directly, but nothing changes) After some time and reading, I finally got to a working solution with this code : var tl:TimelineMax = new TimelineMax({repeat:1, yoyo:true}); tl.to( myMovieClip, 5, { x:500, ease:Linear.easeNone } ) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0 ) .to(myMovieClip, 2.5, { scaleX:1, scaleY:1, repeat:1, yoyo:true, ease:Linear.easeNone }, 2.5 ); yet..... It seems like its not the right way of doing it (I may be wrong ... and it is indeed the right way) Am I missing something? ------------------ part 2 - is this solution good? ---------------- After a while I decided that I want to change the animation effect a little bit. Let me list the whole process again, so its clear what Im trying to do. (the only change from the previous post (link here)is in step 2.2) 1 - move Object from point A to point B 1.1 - at p.A, Object has scale = 1; 1.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled UP by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it up by '2', it has to have width = '200') 1.3 - at p.B Object has scale = 1; 2 - move Object from point B to point A (revert the above) 2.1 - at p.B Object has scale = 1; 2.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled DOWN by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it down by '2' it has to have width = '50') 2.3 - at p.A, Object has scale = 1; the code that I have for this animation is this: var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var duration:Number = 5; TweenMax.to(myMovieClip, duration, { x:500, repeat:1, yoyo:true, ease:Linear.easeNone } ); var scaleFactor:Number = 2; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, onComplete: changeScaleFactor, ease:Linear.easeNone }); function changeScaleFactor() { scaleFactor = 0.5; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, ease:Linear.easeNone }); } As you see..... I only use TweenMax for the animations. Any help or suggestions(with a little provided code if it is possible) for a better solution would be gladly and highly appreciated.

Hi at all, I'm trying to use the reverse function to do the opposite motion, but I need to create a custom reverse function because each image remains on “display block” and does not apply “none” as when it is in play. I would use the reverse to navigate from the last to the first element by applying the same function of the play. Can I create a custom function to reverse? Is there any other way to figure out? Thanks to all, Alvise

Hey guys, Is it possible to tween the cursor css property? I've got a div on my website that expands on hover, and I'd like to change the cursor when it expands so that you know to click on it to do more. So, is it possible to tween the cursor property? I've attached a codepen that's a basic example of what I'm trying to do.

Hey guys, I am very new to GreenSock and I having some issues. I have a button that when you click, plays the animation. But is there a way to set up the JS that when you click the same button again, it reverses the animation? Thanks!

Hi, I've been using the TimelineMax library to animate navigation tabs that are loaded via AJAX. The problem that I am facing is that elements that are newly added to the DOM aren't animated, as they haven't been detected when the Timeline was created. Playing the timeline from the start has no effect especially .from() animations The linked codepen demonstrates my problem although I have replaced the AJAX call with a html load function. Thanks in advance

Hi, normaly I am adding Tweens to my Timeline with TimelineMax.add(). Is there any diffrence (performance etc.) between TimelineMax.to() and TimelineMax.add(TweenMax.to()) ? Or is it just the same?

I put together a codepen for this issue but the codepen appears to work fine. I've attached a copy of the error message I'm seeing in the console and the script is definitely failing to run correctly on the site I'm building. Any thoughts as to why this is working on codepen but not on the site?