Extra long compositing step only in high DPI and Safari

[donavan]

Hi,

 

Not sure if anyone can help me on this but here goes.

 

This is my first React and first GSAP attempt and I've hit a stumbling block that I can't figure out a way forward on. In Safari on a high DPI retina screen on a 27inch iMac there is a specific animation that is jerky. I've done a profile and it's caused by two abnormally large compositing steps that sit between 100 and 200ms long. I've never had to debug the workings of browser rendering before and don't know where to go from here. 

 

The URL is http://staging.rockmysoul.co.za , the jerkyness happens when the header and footer animate into the center of the screen after watching the intro video. It doesn't happen when the header and footer open to reveal the central area. It also doesn't happen at a later point when they are not closing over a HTML video.

 

Things I've tried that have no effect:

- removed the sound

- different easings

- removed the 'amulet' device that fades in

 

Any help at all would be greatly appreciated. I'm on a tight deadline for this project so please forgive the lack of a minimal codepen, I have to finish a few more things before I'll have the space to create one.

 

Much thanks,

Donavan

[Dipscom]

Hi @donavan!

 

Welcome to the forums.

 

As you know we'll ask for a reduced code example to help out, debugging a whole site takes a very long time. 

 

I did have a look at your code briefly, but did not manage to fish out the part where you are animating the header and footer. I can see you setting yPercents and stuff but not really moving anything.

 

The jankyness will, most likely, come from a combination of factors and it will depend on what you are triggering on video end, really. That's why we insist on the reduced case demo, that way we can add little bits at a time and see where it hangs. An alternative, is to do the opposite, slowly turn off things that are being triggered to see if any makes any difference.

 

Having said all that, and nosing around in your code a bit further, I have found in SelectionPage.js the following:

 

var anim = ({target}) => {
            const amulet = ReactDOM.findDOMNode(this.amulet)
            const header = target.find({className: 'header'})
            const footer = target.find({className: 'footer'})
            const logo = target.find({className: 'logo'})
            var time = 2
            var delay = 1
            return new TimelineMax()
                .to(header, time, {
                    yPercent: 50,
                    onStart: function(){rockfall.play()},
                    ease: CustomEase.create("custom", "M0,0 C0.776,0.01 0.844,0.963 0.852,1 0.88,0.92 0.937,0.981 0.944,0.998 0.974,0.96 1,1 1,1"),
                    // force3D: true,
                    // rotation:0.01,
                    // z:0.01,
                    // autoRound:false
                }, delay)
                .add( function(){ crash.play() }, 2.75 )
                .to(logo, time, {
                    yPercent: 50,
                    ease: CustomEase.create("custom", "M0,0 C0.776,0.01 0.844,0.963 0.852,1 0.88,0.92 0.937,0.981 0.944,0.998 0.974,0.96 1,1 1,1"),
                    // force3D: true,
                    // rotation:0.01,
                    // z:0.01,
                    // autoRound:false
                }, delay)
                .to(amulet, time, {
                    yPercent: 50,
                    ease: CustomEase.create("custom", "M0,0,C0.56,0.048,0.6,0.102,0.758,0.25,0.95,0.43,1,0.858,1,1"),
                    // force3D: true,
                    // rotation:0.01,
                    // z:0.01,
                    // autoRound:false
                }, delay)
                .to(amulet, time - 0.5, {
                    autoAlpha: 1,
                    ease: CustomEase.create("custom", "M0,0 C0.888,0 0.848,-0.006 0.932,0.148 1.024,0.298 0.966,0.57 1,1"),
                    // force3D: true,
                    // rotation:0.01,
                    // z:0.01,
                    // autoRound:false
                }, delay + 0.5)
                .to(footer, time, {
                    yPercent: 50,
                    ease: CustomEase.create("custom", "M0,0 C0.776,0.01 0.844,0.963 0.852,1 0.88,0.92 0.937,0.981 0.944,0.998 0.974,0.96 1,1 1,1"),
                    onComplete: callback,
                    // force3D: true,
                    // rotation:0.01,
                    // z:0.01,
                    // autoRound:false
                }, delay)
        }

 

One optimisation that you can do here is to initialise the CustomEase way before you need it and just refer to it during the tween. It probably won't be the silver bullet you are looking for but it does help a bit.

 

 

ps: Love the chicken logo

[donavan]

@Dipscom Thanks so much for even looking. I did try move the Ease instantiation out of the closure but it didn't make any difference.

 

I will create a codepen tonight that replicates the issue.

[OSUblake]

Your gpu might be running out memory. I see a huge spike. How many MB do you have?

[donavan]

So the problem was my understanding of how either the HTML video or the React HTML video library or React itself was calling the onEnd video event handler. Long story short, onEnd was being triggered many times and it was initiating the animation many times. I just had to detect wether an animation was already running and if it was, bail early. Greensock was performing beautifully.

 

 

[GreenSock]

Thanks for letting us know, @donavan