Search the Community

Running into a weird issue when adding multiple tweenFromTo's to a timeline. What I expect to happen in the Codepen: When I first load it, the blocks should be resting against the black line and not be skewed. tl_master and tl_base should be paused at 0. What's actually happening: The blocks are not touching the black line and are skewed. tl_base is paused at 0.5 seconds instead of 0. It looks like tl_base is paused at the start of the final tweenFromTo added to tl_master (which is starting from 0.5 seconds). I don't understand why it's jumping there when I have both timelines paused and set to immediateRender: false. I also tried adding a position parameter to the tweenFromTo's (thinking they were all being added at the same time and overlapping or something) but that did not fix the issue. Please let me know if I can clarify anything.

Can you use GSAP's timeline to execute a javascript function @ certain time?

Hi, I created a timeline with lots of tweens, these tweens have delays on them and what I need is to skip all the delays when I reverse this timeline, long story short on reverse all the tweens must start immediately. Thanks in advance

Hello, sorry if the title is not really clear. I'm trying to create a horizontal parallax animation with at least three layers. The end result should also be responsive, so I can't really use fixed numbers. Also, the image for the background is not the same size as the others. Let's say that the background is 8000px and the image on top is only 5000px. I want the scrolling to stop when the right border of the second image reaches the outer margin of the browser window. I kind of did it, but not quite right. In the pen I created, as you can see, after the character layer reaches its end, the background still goes on for a little while. Is there a way to avoid this? Or a better approach to the whole thing?

I'm trying to have a timeline be part of multiple timelines in greensock. I guess the what I need to happen is one element needs to animate in both cases but only on or the other needs to animate in each case. Check out the codepen to see what I mean Thanks in advance

Hi, For some reason, using .set within a timeline doesn't trigger. (see codepen) However, if I move the .set command to the start of the timeline, it does work: tl.set("#circle1", {autoAlpha:1}) .from("#circle1", 2.5, {scale:0.5, autoAlpha:0, ease:Power4.easeOut}) Any ideas why? Thanks

With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it. My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds <script type="text/javascript" gwd-events="handlers"> window.gwd = window.gwd || {}; gwd.scaleCTA = function(event) { TweenMax.to(redCTA, 0.5, { scale: 1, ease: Back.easeOut.config(4) }); }; </script> I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. Files are attached. Greensock GWD SVG Test.zip

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 there, I'm a bit new in using GSAP. Recently I have made an animation with high def images and svg shape morphing. I think i'm doing something wrong because this animation is really laggy when I use delays between each elements. If I play them together at the same time it's really smooth but it's not the effect I want. Any advice here ?

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

Hai What i am trying to achieve is to infinite loop the scroll animation. I tried with some basic looping. But is it the right way of doing this. Also it is having responsive issues and there is a delay when after every slide starting. I tried as much as i can to make it working.

I think this library is awesome and works great! Thanks for taking the time to make it So I am building a page that when you click on a button, a bunch of photos will fade and scale down into random positions in a container. I have made three different timelines for each group of photos that will incrementally increase in speed until the last group which will slow back down again. The animation is smooth and works great. My problem is I have created a button that will slide out when that last timeline finishes. When someone clicks on it, I want to be able to just replay the entire animation again. However, it will only play the first timeline over and stop, it won't read my callback within that timeline to move to the next timeline. Not sure why it's doing this since I added the false parameter to suppress events. I'm sure there is a better way with TimelineMax to do what I have done, but this is my first time working with GSAP. Sorry, I won't be able to recreate this in a codepen. Thank you for any help you can provide! Here is my code: var groupOne = $('.group-one .photo_item'), groupTwo = $('.group-two .photo_item'), groupThree = $('.group-three .photo_item'), currentItem = 0, rotateValues = ["-20deg", "20deg", "-10deg", "10deg", "0deg"], widthOffset = 100, heightOffset = 300, containerWidth = $('.photos').width() - widthOffset, containerHeight = $('.photos').height() - heightOffset, tl = new TimelineMax(), tlTwo = new TimelineMax(), tlThree = new TimelineMax(); Draggable.create($('.photo_item'), {type:"x,y", edgeResistance:0.2 }); $('.js-btn').one('click', function(){ beginGroupOne(); }); $('.js-restart-btn').on('click', function() { restartTimeline(); }); function beginGroupOne() { groupOne.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupOne, 1.25, { force3D: true, scale:1, autoAlpha:1, ease: Expo.easeOut }, .5, 0) .addCallback(beginGroupTwo, "-=.7"); } function beginGroupTwo() { groupTwo.each(function(index, element) { tlTwo.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tlTwo.staggerTo(groupTwo, .75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .3, 0) .addCallback(beginGroupThree, "-=.5"); } function beginGroupThree() { groupThree.each(function(index, element) { tlThree.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tlThree.staggerTo(groupThree, .25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .1, 0, showRestartBtn); } function showRestartBtn() { $('.js-restart-btn').addClass('is-active'); } function restartTimeline() { tlTwo.pause(0).invalidate(); tlThree.pause(0).invalidate(); tl.restart(false, false); } function getRandomRotate() { return rotateValues[Math.floor(Math.random() * rotateValues.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?

I have been using greensock for a content slider that has 3 buttons, each related to the div holding the content, I've been using timeline lite for the animation, I first click the button the animation works like it should it translates the values I'm giving it, but when I click the button for a second time the divs holding the content don't translate anymore. I have taken screenshots for what's happening, one of them is what is happening in the DOM after i press the button for a second time, and the other is my code, I was following this tutorial http://www.youtube.com/watch?v=4DMzlkmcZCw I appreciate in advance the help. Thank you.

I have a timeline which moves the x position of a really long div to the left. When you hover over a button it will trigger the timeline. However, I can't seem to get the timeline to move continuously. I've tried setting a repeat and an onComplete function to loop the timeline but neither of them worked. I did manage to move the long div using setInterval but when you mouse leave the button the tween animation doesn't stop instantly. Here is a codepen of the setInterval example - http://codepen.io/anon/pen/GZvLVp and here is a codepen of the timeline example - http://codepen.io/anon/pen/BKdeBQ I guess ideally I would want to use a timeline so I can pause the animation on button mouseleave right?

Hello.. I'm a newbie. but I'm a big fan of GSAP. I have been used greensock to animate UI in ActionScript. I have a question about android performance! I'm trying to animate 7~8 UI Elements such as 3 Text Fields, Buttons, and Layers. (7~8 Elements will be moved same time) I have a 3 files. - pages.html - pages.css - pages.js also It is includedgreensock libraries.. here is my sample code. (in pages.js) var startTimeline=new TimelineLite({pause:'false'}); //For 7~8 UI Elements.. var startUIElements1=new TimelineLite({........}); . . . . var startUIElements2=new TimelineLite({........}); startTimeline.add=[, ,, ,, , ]; lastly when I click button than startTimeline.start(); when I click button one more than startTimeline.reverse(); sorry for sharing my full code. What's problem? I wish to use greensock library to animate in android webview smoothly.

I am trying to create a water fill effect that responds to a input type=range value. Managed to get it fill up but the timeline is not responding after the first animation. You will see what I mean in the JSFiddle. Any help would be appreciated! Still new to GSAP animation so excuse any hacky methods. JSFiddle link here. https://jsfiddle.net/7mLkf5uh/#&togetherjs=bu7OUD9asn

Hello, I'm new to GSAP and just getting to grips with it. I'm using a modified codepen post as a guideline for making a slider. I want the slider to have specific effects and feel like I'm almost there. I was hoping that someone here can help me get over the finish line. http://codepen.io/anon/pen/MyKVJW As you can see from the codepen link, My slider contains 4 slides, within each slide are two darkly colored blocks. What I'm trying to achieve is when the slider changes, the left hand block slides in from the top as the right block slide up from the bottom. It seems like the right hand block is doing this but the left hand block is not. There seems to be a delay in the animation of the left block The slides use the following timeline var tlSlideOut = new TimelineLite() tlSlideOut.fromTo($prevSlide, 2, {top: "0%"}, {top: "100%"}) .add(TweenMax.fromTo($prevSlideSmBlock, 2, {top:"0%"}, {top:"100%"}), 0) .add(TweenMax.fromTo($prevSlideLgBlock, 2, {top:"0%"}, {top:"-200%"}), 0) var tlSlideIn = new TimelineLite() tlSlideIn.fromTo($currentSlide, 2, {top: "-100%"}, {top: "0%"}) .add(TweenMax.fromTo($currentSlideSmBlock, 2, {top:"-100%"}, {top:"0%"}), 0) .add(TweenMax.fromTo($currentSlideLgBlock, 2, {top:"200%"}, {top:"0%"}), 0) Is anybody able to offer me some advice on what maybe missing with this....any help would be much appreciated. Many Thanks Adam

Hi all! I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: http://codepen.io/rendro/pen/dxtHc). As you can see, in my pen the two parts split and that's because of the transformOrigin; if I switch the origins like below var $foldUpper = new TweenMax($upper, 0.5, { rotationX: "-45deg", transformPerspective: 2500, transformOrigin: "bottom center", transformStyle:"preserve-3d" }); var $foldLower = new TweenMax($lower, 0.5, { rotationX: "45deg", transformPerspective: 2500, transformOrigin:"top center", transformStyle:"preserve-3d" }); I can successfully folding keeping the elements together (since they fold using the center of the container as reference) but I also want to keep the upper border sticked to the top of the main container. The other issue I noticed is a strange "snap" (or lag) when I get back to the original position. Could you help me? Best Regards, Maurizio

I would like this svg to 'appear to be drawn in a z-form. meaning top (green) line from left to right, then (red) line from where the green line leaves off and returns diagonally right to left, then finally the bottom (black & grey with shading) lines are drawn again left to right. There are two lines that form the bottom line, they should draw at the same time, each of these four lines need to be drawn separately to allow the path width to change a little across each direction change and the two lines (as well as allowing for shading of one) allows the width of the combined line to give change a little and this (I hope) lends a real sketchy nature to the final result. I understand (I think) that the there should be a tween in which each of the three individual line drawSVG effects occur (Note again that the two lines (id="line3") should draw concurrently). I was able to get the sequence right at one time, but the directions never were correct, and then it broke and would not work at all. So I have at least reconstructed it to a place that at least all the parts are present and I think the concept is pretty clear. Things that I would like to really understand; How to assign either an id or class name (I know there was much said about assigning a 'var' to each element and then using the var as the id in the svg; but there are some examples preferring use classes (not clear to me if there is a clear difference in this or cases where one works and one does not). To be honest I have found pretty much everything to be complicated (this is more a feature of JS rather than GS). By the way, I prefer a single more complicated solution that ALWAYS works than some mix of sometimes works easier methods. Once we get past the naming conventions/preferences then we have the nesting of drawing elements (timelines) or delays, either is great, but I am not totally convinced that a TL is needed for something as lightweight as this example (I do like them). Finally once this all works it is my "hope" to be able to export the shading block from the inline SVG to the CSS file. Sorry for the verbose nature of this post, I hope that this will prove helpful to others with my learning style. Something that would be really helpful is a subset of Forums that cover these just starting out sort of items. I had scanned the forum titles as well as searched for both "beginner drawSVG" and "newbie drawSVG" so I am thinking my question may be novel, but if not sorry I tried.

Hi again, Another newbie question. Can anyone help. I am trying to get the last element in my timeline to start before the previous animation finishes. Thanks in advance. var h = $("h1"), para = $("p"), over = $(".overlay"), mod = $(".header-cta .module-cta"); var t1 = new TimelineLite() t1.from(over, 1, { css:{opacity: 0}, // /delay: 6 }); t1.from(h, 2, { css:{marginTop:400, opacity: 0}, ease:Bounce.easeOut, // /delay: 6 }); t1.from(para, 2, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, "-=1.3" ); t1.staggerFrom(mod, 1, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, 0.1, "stagger" );

Hi everyone. I set a infinite timeline with some callbacks onComplete & onRepeat that change numbers around the page. I'm working into an ember application, so because of my timeline is infinite and change numbers in the page I need to kill everything when the user leave the page to another, otherwise when he will come back the new timeline initialization will mess-up the design. I tried with the function mytimeline.kill() but looks like it doesn't work. Any idea on how to solve? Cheers! ps: it's difficult to provide a codepen in this case sorry

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?

Hi there I'm working through some of the concepts of GreenSock and was hoping someone could point out to me the issue with this animation. As you can see in the codepen the slider measuring the duration of the entire timeline is only about 80% through when it appears all my animations are finished. As a result, when I got to reverse the animation, there is a considerable delay before an animation kicks in. Thanks DB

Is it possible to add timeScale when playing a timeline with this method:? timeline.reverse() I'm running play timeline within a 'if scroll is this' loop and would like to reverse the timeline with faster speed on the 'else' statement like this: if (scrollTop < 64) { timeline.play(); } else { timeline.reverse(); } Thanks for your time. Yan