Jump to content
Search Community

Parent animation slows child animation in -webkit

Mike test

By Mike
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Mike test

Mike

Posted
Posted

I have an animation which pushes over the <body> tag revealing blank space to the right of the website, and at the same time it expands an <div> on the page. In mozilla and IE both animations run smoothly at the same time and finish together. In -webkit browsers the <div> expansion animation appears to be slowed down by the <body> animation so the 2 don't finish together, but the onComplete functions fire at the same time - the <div> onComplete function actually fires before the animation completes because it appears to be slowed down. Any ideas how to resolve this?

 

Here's my demo page:

http://scrippsonline.com/risingStars/HGTV/sidekick/index.html

 

Thanks for your help!

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

Thanks to Carl I knew that the red rectangle had to be clicked, that's why a codepen is always a good idea. But in this case it wouldn't helped much.

 

Unfortunately the issue is not GSAP related and just a browser thing.

 

The thing is that when you click the rectangle, indeed there's a lag in chrome and not in any other browser. I took a closer look in dev tools and this is what I found:

0t7r.jpgIf you look at the settings every event that takes over 15ms is shown, and the only ones are the screen paints, that are taking between 60 to 73 ms each. That's way too much and I believe it has to do with the rest of the stuff in your site.

 

4hu1.jpgIf you look at the top/right you'll see the red rectangle that has to be clicked, showing just a little bit. Since the part of the screen taken by dev tools is not being animated the paint doesn't have to work too much on that, and look at the time the paint takes, just 8 ms.

 

If you check this codepen:

 

See the Pen zmdIC by rhernando (@rhernando) on CodePen

 

You'll notice that it isn't out of sync.

 

I believe that the rest of the stuff in your site (images mainly) is causing too much stress performance-wise in webkit, so meanwhile the code execution (which is almost never the issue) is right on the spot, the browser rendering is getting behind, because animating the whole thing is too expensive.

 

What you could try is get rid of some images (if possible) to see at which point thing start to get messy. Also you could try a different approach for that particular element.

 

Rodrigo.

  • Like 4
Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

Rodrigo, thanks for putting in all that effort. 

 

This indeed doesn't seem like a GSAP issue at all, but rather a rendering issue in Webkit. Frankly, I've never seen the entire body animated that way, and I suspect it's rather costly performance-wise with all the document reflow that must be calculated on each frame. Perhaps other browser vendors calculate things differently, thus they don't chug so much. I've seen that with image resizing, where Chrome (for example) takes a HUGE amount of time but its sub-pixel rendering and antialiasing is beautiful, whereas some other browsers look more chunky but they're significantly faster. Chrome prioritizes beautiful antialiasing at the cost of performance, but the other browsers flip-flop those priorities. This type of thing could be at play with moving the entire <body> around. 

 

If you still need help, please create a reduced test case in codepen or jsfiddle so that we can play around with it and see exactly what's going on. 

Link to comment
Share on other sites
Mike test

Mike

Posted
  • Author
Posted

Thanks everyone for the responses! And sorry for the confusing demo.

I work on advertising so I don't have control over the page content, just the ad (which would be the red square, and I've been tasked to develop this ad which slides the page content over, but i can't alter the page content at all. 

I suspected that it was the page content that was the problem given how many images there are, but thanks for confirming that for me.

 

Thanks Rodrigo for the detailed response.

 

Mike

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...