[Chrome bug: When I scale an element with background image, the image flickers]

Thanks @Jonathan!

 

I applied your suggestions, but it is the same for me. Here is my pen: 

See the Pen NjNxWr by anon (@anon) on CodePen

 

The image still flickering, with your pen too.

[Chrome bug: When I scale an element with background image, the image flickers]

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

[Chrome bug: When I scale an element with background image, the image flickers]

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: 

 

When I add as an img element, it looks good during the transition: 

See the Pen pPyvdp by anon (@anon) on CodePen

 

It happens in the latest Chrome and Opera too. Do you have any suggestion to make it smooth with the background image?

See the Pen bWpNYq by anon (@anon) on CodePen

[Timeline Repeat in another timeline]

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

[Timeline Repeat in another timeline]

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

See the Pen rabpGw by anon (@anon) on CodePen

[Special 3d animation rendering issue.]

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:

See the Pen bNEoWb by anon (@anon) on CodePen

[Special 3d animation rendering issue.]

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:

See the Pen KwVXMp by anon (@anon) on CodePen

 

Am I still missing something?

[Special 3d animation rendering issue.]

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.

[Special 3d animation rendering issue.]

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

[Special 3d animation rendering issue.]

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:

See the Pen EaPaeg by anon (@anon) on CodePen

 

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?

[Special 3d animation rendering issue.]

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

[Special 3d animation rendering issue.]

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?

See the Pen yyYWXV by anon (@anon) on CodePen

[How to create fixed duraiton timeline?]

Thanks, this seems the best for me

[How to seek back to the position 0 with render?]

Thanks, here is my improved Codepen:

See the Pen rBfdb by anon (@anon) on CodePen

 

It contains my optimalization for the progress(1), so it won't generate unnecessary overhead.

[How to create fixed duraiton timeline?]

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.

[How to seek back to the position 0 with render?]

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

[How to create fixed duraiton timeline?]

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

See the Pen LtpvE by anon (@anon) on CodePen

[How to seek back to the position 0 with render?]

I made some tries and it seems like if I invalidate() the timeline before the pause(0) or play, it works fine. Codepen:

See the Pen wItnL by anon (@anon) on CodePen

 

But I don't like this solution, maybe you can give me a better alternative

[How to seek back to the position 0 with render?]

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:

See the Pen Bwfah by anon (@anon) on CodePen

 

I hope you can help me out on this one too!

[How to seek back to the position 0 with render?]

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!

See the Pen ewFbC by anon (@anon) on CodePen

[Update vars of a Tween which already added to a timeline]

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?

[Getting X / Y values from element]

Hi!

 

Check this topic: http://forums.greensock.com/topic/7181-rotation-and-scale-getter-2d3d/#entry26757

 

console.log(yourElement._gsTransform);

[Update vars of a Tween which already added to a timeline]

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:

See the Pen fszAh by anon (@anon) on CodePen

 

Steps:

1. Load the codepen
2. click on the red box
3. watch the animation, it moves horizontally 100% relative to the width of the current box
4. Resize your window
5. Click on the box again
6. 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.