RolandSoos

Thanks @Jonathan! I applied your suggestions, but it is the same for me. Here is my pen: http://codepen.io/anon/pen/NjNxWr The image still flickering, with your pen too.

If I apply the scale animation with CSS transition, it is smooth in Chrome too. But I need a GSAP solution

Hi, I have an issue and I was unable to find solution for this case. In this example, the image is flickering when it scaled down with a smooth animation: http://codepen.io/anon/pen/bWpNYq When I add as an img element, it looks good during the transition: http://codepen.io/anon/pen/pPyvdp It happens in the latest Chrome and Opera too. Do you have any suggestion to make it smooth with the background image?

Well, thank you! I should have thought for this one

Hey guys! I have a repeated timeline, which goes forever. It is added between two tweens on the main timeline. It is logic what is do currently. Plays the first tween Then plays the inner timeline repeated forever Never reaches the second tween on the main timeline. My question is, is there a way to make the inner timeline to stop on next iteration and continue on the main timeline? Something like this: d.onclick = function(){ tlRepeat.eventCallback('onRepeat', function(){ tlRepeat.stop(); }); };

Here is a different approach which solves the rotation issue in the previous post also I have added a z-index fix. I don't really like this z-index fix, so it could be great to hear your opinion to my previous post. Here is the z-index fixed codepen: http://codepen.io/anon/pen/bNEoWb

I have followed your suggestions and implement everything from your post, but still no luck. It looks like the same. You can check the new here: http://codepen.io/anon/pen/KwVXMp Am I still missing something?

Thanks Jonathan! It looks like a great explanation which explain a lot of things for me. I will rewrite my code with your suggestion on Monday and update the post with my result.

Thanks Jonathan, it works fine in Firefox, but it still has the same rendering error in Chrome. Could you check it in Chrome?

Thank you guys for the great answers. Also I'm stuck with my new example which derived from this project. Here is my new codepen: http://codepen.io/anon/pen/EaPaeg On the JS panel I can give in the width, height and depth of the cuboids, then just animating them to each of the side of the cube/cuboid. The problem is that it has some main rendering glitches in Firefox and also in Chrome on Windows. In Chrome the Left side panel (the panel which is on the left side from the actual front panel). Firefox just produce random glitches with the same panel. Could you give me some tips for this example too?

Hmm, It seems like this bug only happens on Firefox 33. Firefox 34 works as expected, strange...

I have a special case, where I would like to rotate 90 degree a cuboid. It all works fine in Chrome, but there are some glitch in latest Firefox and I'm not able to find out what could cause this: This happens lot of time for me, also when you resize the lower pane of codepen, it sometime renders fine. Also before the animation finish, the red pane is false rendering it's rotation and also another glitch happen. You can see it in codepen, by commenting out timeline.play(); and uncomment: timeline.progress(0.93); Is there any way to solve this issue?

Thanks, this seems the best for me

Thanks, here is my improved Codepen: http://codepen.io/anon/pen/rBfdb It contains my optimalization for the progress(1), so it won't generate unnecessary overhead.

Ther user can define the minimum duration for the timeline and also he can add custom animations to this timeline on an interface. I have to make sure that my onComplete call, only calls When all of the animations are played on this timeline Also the defined minimum duration conditions are met The extra animation seemed the best way for me to achieve this one, as I don't have to make extra checks. If I just go with the original timeline, I should check onComplete, the timeline duration, if that duration is higher than the minimum duration, then just call the original complete call, but when it is not, I should create a timeout for the (minimumDuration-timelineDuration) time and meanwhile this timeout, I should be able to tell other components that the animation (this empty part) isn't over yet, so not start another action.

Thanks for the great explanation. In your opinion is it better to set it to progress(1) than invalidate()? Which needs more resource?

If I have an animation somewhere on the timeline, also I have a defined value which contains the smallest duration when this timeline can finish, is there a better way to achive this than the attached codepen? tl.to("#redBox", 2, { x: 200, delay: 0.5 }); My animation's duration is 2,5 seconds, but I would like the timeline to complete only after 5 or more seconds. tl.to({}, 5, {}, 0); Then I have this empty animation with 5 seconds duration starting at position 0, but it seems too hacky. Is there any in built way to do this? (I saw that .duration(value) setter is not made for this as that just change the timescale. I don't want to change the behaviour of the animations.)

I made some tries and it seems like if I invalidate() the timeline before the pause(0) or play, it works fine. Codepen: http://codepen.io/anon/pen/wItnL But I don't like this solution, maybe you can give me a better alternative

Thanks you are right. I have redefined my animations a little bit. (I haven't followed everything you wrote, but I have followed your directions in my solution.) So I have changed the algorithm in my animatons, removed the 0 duration hack and instead used .fromTo only for the first animation and other animations on the same element only use .to But I bumped into my real original problem, which I haven't yet described here. I just create the specified timeline, then I have to set back the element to the original position (currently x:0). The I need to pause it on the 0 position, but with this step the element should immediately jump to the x:500 position. Then a play should start the whole animation and end on x:0. use cases #1 Load codepen Hit Zero button - this jumps back the element to x:0 Hit pause(0) button - now the timeline should render the element on x:500, but it does nothing hit play button - the animation should play from x:500, but it just waits the delay and just then jumps to x:500 #2 Load codepen Hit Zero button - this jumps back the element to x:0 hit play button - the animation should play from x:500, but it just waits the delay and just then jumps to x:500 New codepen: http://codepen.io/anon/pen/Bwfah I hope you can help me out on this one too!

I have attached a Codepen with a special case. This is just taken out from a complex system and I'm unable to use different "use case" for the Tween creation. I have an element and I know that the target X value for this element is 0. I have an algorithm which creates the fromTo tweens for the preceding tweens and also a simple Tween with duration 0 to set the calculated "starting" value. (this 0 duration is a hack to position the element to the right place on play(0), because of the first fromTo has a delay and it won't render until the delay ended). So the question is, how could I add these tweens to the timeline and the set the timeline's position to 0, which would mean x: 500 in my example? Also it seems like on my Codepen example, that the duration 0 tween isn't work fine with the latest version. I'm using VERSION: 1.11.8 and it works fine there. It could be great if you could give a better solution for that hack. Thank you!

I'm using the position values (left and top for other purpose and I don't want to change them with the animation). I just wanted to update my tweens every time on windows resize, but it seems like it is currently not possible. Am I right?

Hi! Check this topic: http://forums.greensock.com/topic/7181-rotation-and-scale-getter-2d3d/#entry26757 console.log(yourElement._gsTransform);

As I know GSAP can't handle percentage values for x and y. Percentage values can help us to make relative animations (relative to the element's width or height) combined with responsive design. Here is a codepen which shows the problem: http://codepen.io/anon/pen/fszAh Steps: Load the codepen click on the red box watch the animation, it moves horizontally 100% relative to the width of the current box Resize your window Click on the box again The tween doesn't get updated, so it moves horizontally with the old width Is there a way to "fix" this? I would like to prevent the browser from the recreation of the tweens and timelines every time the browser resizes.