[Possible GSAP bug switching classNames in Chrome]

1 hour ago, GreenSock said:

Aha! I see the problem. 

 

GSAP does a ton of work to manage conflicts and ensure that things run smoothly even if you interrupt things mid-tween. One of the things it does in the case of a className tween is to see if there's already one running on that element, and clear things properly (which likely involves editing/reverting inline styles). To work around some browser inconsistencies and ensure that things render properly, it records the element's cssText (all the inline styles) and then after it does its work of applying the new class and analyzing the differences in all the properties, it re-applies that cssText. In your case, that entails background-image too but you've actually got a URL that changes the image supplied randomly!  

 

You can get the exact same effect by removing TweenMax altogether and simply doing:

//doesn't change anything, but the browser re-loads the background-image if you've got cache disabled:
elem.style.cssText = elem.style.cssText;

 

I'll add a line to CSSPlugin that only runs that code if the recorded value is different than the current one. Seems to resolve this edge case. You can preview the next version of GSAP (uncompressed) here with that change in place: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Better? 

Yup! Solves the problem. Thank you for your quick responses. 

[Possible GSAP bug switching classNames in Chrome]

I also want to point out I'm not seeing the issue in FireFox when 'Disable Cache' is checked. It seems to be isolated to Chrome.

 

I couldn't duplicate the issue in Chrome 73. It appears something in Chrome 74+ changed.

 

[Possible GSAP bug switching classNames in Chrome]

Quote

Any chance you could post a codepen that's not blank? I think there must be a misunderstanding somewhere. 

 

That's very strange. Not sure why it was blank. I forked it. You can view the demo here:

 

Quote

Oh, and there is one case where an image's src must get updated internally, and that's for backgroundPosition because it has to measure the width/height of the native image so that it can accurately handle things like percentages. As far as I know, it's impossible to do otherwise. I found the original email notification about this thread and it contained a link to a valid codepen, so I peeked at that and it does indeed look like you've got a backgroundPosition in play there, and it's percentage-based. Perhaps that explains things. 

I also tried to remove the backgroundPosition in the style to see if that impacts the rendering. It doesn't... same issue.

[Possible GSAP bug switching classNames in Chrome]

In Chrome 74 and Chrome 76 (Canary) with 'disable cache' checked in Dev tools, TweenMax will force a reload on the image animating when the class names are swapped or animating. In addition, there is a weird flicker that happens. The flicker could be a side effect of the force reload. See code pen. The code pen shows vanilla js and jquery working as expected.  You can also look at the network to see the additional (forced) image requests.

 

Note: GSAP's images change because its forcing a reload. Every-time placeimg.com is called, a new random image is returned. 

 

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

[KillTweensOf + Timeline restart]

Thanks. I was hoping there was a way to restart the timeline from its initial state. For this particular case, I'll have to recreate the timeline rather than calling .restart();

 

[KillTweensOf + Timeline restart]

See code pen URL. Wait for the animation to play. In 2 seconds, a TweenMax.killTweensOf call will be made. I'm attempting to stop the autoAlpha from advancing (animating). That woks successfully.

 

When I click on the square, I'm expecting the Timeline (frame_1_in) to restart and the first tween in the timeline to start like it originally did. However, the 'autoAlpha' property is now ignored (not what I was expecting). Is there a way to restart the Timeline and all the corresponding tweens/properties like 'killTweensOf' never happened? My intent was to only use killTweensOf once--- with it not impacting the timeline after it restarted.

 

 

 

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

[Loaded Plugins]

Thanks Everyone! 

[Loaded Plugins]

Is there a way to see what plugins are loaded? For example, I want to be able to detect if CustomEase or ScrollTo is available on a page.