Search the Community

Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!

Hi, It's still the same question I posted before. I apologize if it was confusing. I think I found a better way to ask it this time. Problem: The jellyfish's tentacles stopped animating like it used to or it is only animating partially after being dragged, while the head was still animating the whole time. My thought process of creating this animation is: head and tentacles rotate, scale and move -- the original state, stored in the original function function original() { tlAll .to(total, 30, { bezier:path, ease:Power2.easeInOut } ); tl .fromTo(head, 3, {scale: 1, y: 0}, {scaleX:.8, scaleY:1.2, autoAlpha: .8, ease:SlowMo.config(20)} ); feetLeftTl .to([top_first_left, bottom_first_left, top_sec_left, bottom_sec_left], 3, {y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}); feetMdTl .to([top_middle, bottom_middle], 3, {y: 10, scaleX: 0.8}); feetRightTl .to([top_sec_right, bottom_sec_right, top_first_right], 3, {y: 10, scaleX: 0.8, rotation: 10, ease:Sine.easeInOut}) .to(bottom_first_right, 3, {x: -4, y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}, 0); TweenMax.to("#light feGaussianBlur",3,{attr:{stdDeviation:5},repeat:-1,yoyo:true}); } the whole jelly fish can be dragged to move towards left or right, during which the head and tentacles rotate slightly to the other direction to create a sense of water resistance when the dragging is finished, the jellyfish should go back to its original animation -- the part that I can't figure out Draggable.create("#total", {type:"x,y", edgeResistance:0.65, bounds:"svg", throwProps:true, autoScroll:true, onPress:function() { startX = this.x; startY = this.y; }, onDrag:function () { var xChange = this.x - startX; var yChange = this.y - startY; if(xChange < 0) { //to the left TweenMax.to(head, 1, {rotation:5}); TweenMax.to(feet, .6, {y: 15, rotation:-10}); } //to the right else { TweenMax.to(head, 1, {rotation:-5}); TweenMax.to(feet, 1, {y: 10,rotation:15, ease:SlowMo.easeInOut}); } }, onThrowComplete: function () { var reset = new TimelineMax(); // // // reset var newhead = new TimelineMax(); var newfeet = new TimelineMax(); newhead.to(head, .5, {rotation:0}); newfeet.to(feet, .5, {y:10,rotation:0}) reset .add(newhead,0) .add(newfeet,0) .add(feetLeftTl,0) .add(feetMdTl,0) .add(feetRightTl,0); }, }); But now, the tentacles stop rotating and scaling after the jellyfish being dragged and I checked the code over and over again but could not find a solution. Please advise on this problem. Thank you so much!!

I hope this makes sense! I have a timeline, and I was wondering if there's a function to play the animation from its current position and pause when it gets to a specific time. Is there already a function for this, or would I have to build something myself?

Hi I am trying to change a text value in an animation using a timeline, for example, i'd like the text to animate off, the value to update, and then animate on again. I need to know that the animate on doesn't start until the text value has changed. I hoped to be able to use the timline.set(textfield, {text:"NewValue"}); but it seems that set/tween can only use numeric values? How can I best achieve this result?

The codepen has a tween/timeline that's 1 second. Clicking the record button steps through the animation and snaps 60 PNGs per second - so there are 60 images. The last bit of the Circ.easeIn is so fast that it doesn't make it into the collection of images. I hate to increase above 60/sec. Is there any way to add a little padding onto the end of the timeline so that last snapshot gets the end of the animation? In the codepen, when you click the record button, you see the images dropping in below and can see where the last image is snapped at the beginning of that last 60th of a second but prior to the end of the animation. The preview button shows the actual animation. For experimental purposes, I increased the FPS to 120 and it still never made it. I searched through the forum and found a post in the actionscript area that talked about adding a dummy "set" like the following: // get the duration of the timeline var totalTime = mainTimeline.duration(); var dummySet = TweenMax.set({},{},totalTime+1); When I tried that in my app I got the same duration - nothing changed. Is it possible to pause at the end and then finish? If I missed an explanation for this please point me in the right direction. Thanks!

Hello, is there any method to add some "empty tape" at the end of a timeline. Something like delay at the end.

I have an app where SVGs can be dropped onto the stage and animated in various ways to build a complete animation. I'll want to give the user ability to chain together Tweens on each SVG and play them all together. There will, of course, be a main Timeline. My thought is that for each SVG that gets dropped onto the stage, create a new NestedTimeline class that would contain the Timeline, the element to be tweened on that timeline and then push tweens into it. I would add each of those Timelines to the main one. When the play button is clicked, the main timeline would play. I'm just trying to keep from painting myself into a corner. I know I've seen custom one-off timelines where various elements are tweened within the same timeline. I just don't know of a way to automated that without things getting pretty messy. Thoughts? btw, I plan to try to build something like the Timeline Visualizer lot's of folks are wishing you guys would turn into a control tool - hint, hint When a new item is dropped onto the stage, a new track would be added to the visualizer.

Hello, I went throught the doc and couldn't find anything. Is it possible to set an easing function to a timeline and have it like inherited from all the Tweens in the timeline?

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

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 ?

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

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