[1px Bug in Safari]

Hi guys,

 

I have the following problem: During an animation, parts move one pixel in Safari. In Chrome I could not detect this behaviour.

 

So far I have tried the following, unfortunately without success:

 

CSSPlugin.defaultForce3D = false;

I hope one of you can help me.

Many thanks in advance.

[Counting down from 5 to 0 – proceed to next step]

Guys, thank you very much for your answers. 

 

 

15 hours ago, GreenSock said:

Good solutions, guys. You can use roundProps if you want the number rounded (or @PointC's toFixed() if you prefer). Here's a super-simple one: 

 

See the Pen 619e1802ce10452a468799708af05dc8 by GreenSock (@GreenSock) on CodePen

 

Or you could use a SteppedEase. Lots of options

 

 

 

Could you please explain the SteppedEase solution any further?

 

 

Thanks in advance!

[Counting down from 5 to 0 – proceed to next step]

Hey guys,

 

I have the following setup:

 

When you click on the first button, you proceed to the second slide. There is a number (5), which should count down to zero, then proceed to the next slide without any user interaction.

 

How can i do that?

 

Thanks in advance, any help is appreciated!

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

[Pausing timeline when complete]

Okay I don't know if this is the right way to do it, but I solved the problem via a simple function:

 

function pauseLeft() {
    tl.pause();
}

var dummy = document.getElementById('dummy');
    
    tl = new TimelineMax({repeat: -1, paused: true});
    
    tl
        .to(dummy, 0.5, {x: '+=60', ease:Power3.easeOut, onComplete:pauseLeft}, 0.5)
        .to(dummy, 0.5, {x: '-=60', ease:Power3.easeOut, onComplete:pauseLeft}, 1.5);

 

 

Thanks anyway

[Pausing timeline when complete]

Hey guys,

 

I want to pause the timeline when it's completed.

 

tl = new TimelineMax({repeat: -1, paused: true});
    
    tl
        .to(dummy, 0.5, {x: '+=60', ease:Power3.easeOut}, 0.5)
        .addPause()
        .to(dummy, 0.5, {x: '-=60', ease:Power3.easeOut}, 1.5)
        .addPause();

 

The first addPause() works, the one at the end doesn't effect the timeline at all.

 

The timeline is paused on load, a click on a button starts it. It pauses on the first addPause, a buttons starts it again but it doesn't pause on the last addPause.

 

I hope it's somehow clear what I'm trying to achieve

 

I'm thankful for any help.

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

[Start timeline after preloading all assets]

Hey guys,

 

I'm new to GSAP and was wondering if there's an easy solution to start the timeline AFTER all assets/images have been loaded. Maybe even with a circular preloader e.g.

 

Thanks for your help