Jump to content
Search Community

Why does Greensock animations works only on some Chrome browsers?

opila test
Moderator Tag

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

I have been testing a set of Greensock Animation code on a Javascript file and seems to be working quite fine.

I am using Chrome 61.03, and a designer who is testing my code seems to have it work initially.

However, the very moment that the designer was reloading the code to run it again, all the images which were not transformed initially or animated would disappear immediately upon animation start.

I was trying to tell that designer that it could be a cache issue or a browser issue; go update it or something. She refused to budge. I don't know if she is using some outdated version of Chrome browser. 

 

Anyway, here is the code that I have; it's difficult to separate into independent working modules to put into some CodePen or something.

I split the code into JS, CSS, and HTML.

Is it a code issue that causing this to happen on only some browsers?

 

See the Pen JOEQQZ by opila (@opila) on CodePen

Link to comment
Share on other sites

Welcome to the forums. We'd love to help - it's just really difficult without some kind of reasonable reduced test case that clearly reproduces the issue. This doesn't sound like a GSAP-related issue, but I could be wrong. It looks like you've got some PHP intermingled in that HTML. A codepen would be ideal, but even some live site would be better than a copied/pasted version of all the HTML, CSS, and JS for us to try to parse through and guess. Any chance you could provide that? 

  • Like 2
Link to comment
Share on other sites

19 hours ago, GreenSock said:

Welcome to the forums. We'd love to help - it's just really difficult without some kind of reasonable reduced test case that clearly reproduces the issue. This doesn't sound like a GSAP-related issue, but I could be wrong. It looks like you've got some PHP intermingled in that HTML. A codepen would be ideal, but even some live site would be better than a copied/pasted version of all the HTML, CSS, and JS for us to try to parse through and guess. Any chance you could provide that? 

https://goo.gl/VaK1m3

This link is temporary for security reasons.

Link to comment
Share on other sites

Hello @opila and Welcome to the GreenSock Forum!

 

GSAP will work in various Chrome versions on various platforms. I'm sure its just something in your code that you are trying to do. There is really no way we could even begin debugging your code without seeing it run in the browser ;) and know some important details, like:

  • Which version of Google Chrome version you tested in?
  • And what OS and OS version you tested on?

That info is very important since each Chrome version has their own issues, and we would need to know that to properly know what could be the issue. Its best to just not post all that code like you did above, and to create a limited codepen demo example so we can test your code in context.

 

Here is a video tut on how to create a codepen demo example.

 

 

Thanks, Happy Tweening! :)

  • Like 2
Link to comment
Share on other sites

To answer Johnathan's questions:

 

OS: Mac OSX 10.11.6 El Capitan

Google Chrome: v62.03 (It was updated silently after I reboot? It was v61 yesterday)

 

Here is my CodePen: 

See the Pen JOEQQZ by opila (@opila) on CodePen

 

I noticed something too: when it is running in Safari, it won't load and lag significantly, not sure what gives?

 

Another question: in Firefox, if I were to use GSAP to apply rotation animations onto divs instead of the img within that div, it would animate just fine. But the very moment in Chrome I were to use GSAP to do the same rotations onto divs (instead of the imgs within), it would cause the flickering. What gives? It appears intermittent too; like in other Mac OSX machines and laptops, even in Chrome theirs would work fine without the code changes. I wonder what's causing this inconsistent behaviour?

Link to comment
Share on other sites

It won't load because jQuery removed the .load() method. You need to use .on("load", fn).

 

// Save a reference instead of creating the same object over and over
var $window = $(window);

// Now it will load
$window.on("load", function() {
  ...
});

 

 

I seriously doubt there are any browser issues. Most of the problems I see look like they are related to your css, how your html is structured, and the types of properties you are animating. In particular, the greeting card seems to be causing a lot problems.

 

There's probably a lot of layering issues or optimizations that could be made. Perhaps @Jonathan can advice on that.

 

I would change all your animations that use left and top to x and y. That can be really sloooooooooow and jittery. Every time you animate left and top, the layout is invalidated, and the browser has to recalculate it, which can be costly. 

 

 

 

For your tweens, you don't have to use a css object as that is implicit if your animating an element. I noticed that a lot of your repeats aren't happening because you put them inside css objects, when they should be outside of it.

 

// Nope
TweenMax.from("#parcel04", 2.1, {
  css: { rotation: -270, repeat: 3 },
  ease: Quad.easeInOut
})

// Works
TweenMax.from("#parcel04", 2.1, {
  css: { rotation: -270 },
  repeat: 3,
  ease: Quad.easeInOut
})

// Also works
TweenMax.from("#parcel04", 2.1, {
  rotation: -270,
  repeat: 3,
  ease: Quad.easeInOut
})

 

 

Again, I wouldn't animate left and top unless absolutely necessary, but what are these really large numbers for? They seem to be rather arbitrary, and possible unnecessary.

TweenMax.from("#parcel07", 1.5, {
  bezier: [{ left: "-2000%", top: "-900%" }],
  ease: Power1.easeInOut
})

 

 

In some of your tweens, you're using 0 as a value for visibility, which isn't valid. You need to use something like "hidden" or "visible".

ups.to(".ele-greet", 1, { 
  opacity: 0, 
  visibility: 0 // Nope
}, 7); 

 

A better approach for that would be to use autoAlpha. It works just like animating the opacity, but when it reaches 0, it will automatically set the visibility to "hidden", which can help improve performance. It will work in the other direction too. If your element is hidden, as soon as its opacity value becomes greater than 0, it will set your element's visibility to visible.

ups.from(".ele-greet", 3, { autoAlpha: 0 }, 3.5);
ups.to(".ele-greet", 1, { autoAlpha: 0 }, 7);
ups.from(".ele-msg", 1, { autoAlpha: 0 }, 12);

 

 

Well, that's enough for now. Here's a fork of your demo that will load so other people can take a look.

 

See the Pen MOpWEy?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 6
Link to comment
Share on other sites

Hi OSUBlake,

 

I have taken your advice on changing the JS syntax as well as GSAP tweens and syntax changes.

I have also tested the changes in my localhost, and while the performance has improved only slightly when running in Chrome, performance in Safari still suffered.

So I resorted to removing CSS rules one by one.

I realized that this set here is causing a major performance hit in all browsers:

.animation-element {
  -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  -ms-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  -o-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

Project requirements requested by the client include use of drop-shadows on image elements.

So it is likely that the filter CSS rules can be applied to all browsers except Safari browser.

 

Another discovery I have made: the "image flickering" is caused by applying the Tween onto the div containing the image instead of the image itself.

Making some changes, the unwanted flashing effect didn't happen again.

TweenMax.from(".div-animation-element img", 2.1, {
  rotation: -270,
  repeat: 3,
  ease: Quad.easeInOut
})

 

Link to comment
Share on other sites

Hello @opila,

 

The CSS filter property, especially the filter drop-shadow can be a big resource hog. 

 

You could try and use the CSS box-shadow property, which is used for the very purpose of giving elements like <img>'s  a drop shadow. 

 

box-shadow can also be a resource hogs but not as bad as CSS filter drop shadow which are still somewhat buggy in all browsers. But box-shadow is your best bet for a drop shadow effect on a box.

 

The flickering can also be resolved by using various CSS transform supporting properties like transform -axis: preserve-3d, backface-visibility: hidden, and the use of the perspective property or the CSS transform: perspective function (transformPerspective).

 

But glad you got it sorted. :)

  • Like 5
Link to comment
Share on other sites

On 11/16/2017 at 8:41 PM, opila said:

Project requirements requested by the client include use of drop-shadows on image elements.

So it is likely that the filter CSS rules can be applied to all browsers except Safari browser.

 

You certainly don't have to use a CSS filter for a drop shadow. Add the drop shadow to your images in Photoshop, or use a separate image as the drop shadow.

 

Here's a technique for using a drop shadow image for a border.

https://aerotwist.com/blog/slicing-svg-9-ways/

 

  • Like 4
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
  • Recently Browsing   0 members

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