I have a complex tween using onUpdate and precise timing that is working on Safari but not FireFox or Chrome. The two browsers are throwing a warning about Cross-origin isolation which may or may not be the problem but since the tween in question uses (one presumes) high resolution timers it makes sense to ask. (the Google note on the error https://greensock.com/forums/forum/11-gsap/?do=add mentions that it just was implemented this month (May 2021) in Chrome so that appears to be a good clue as to why it's suddenly not working.
Here is the warning from Chrome:
"SharedArrayBuffers (SABs) can be used to construct high-resolution timers. High-resolution timers simplify Spectre attacks on cross-origin resources."
I am using both React.js and GSAP3 as "cross origin" libraries if I understand their definition of the term .
My question is this. Since this is a new Chrome thing, is there a known cross browser compatibility issue here? If not--never mind..
btw, here is a code snippet (the tabs did not trans-copy well sorry) , btw creating a Codepen would be very time consuming...
const pathStartOffset = 0.0;
const pathEndOffset = 1.0;
const sparkleBaseScaleFactor = 3.5;
const sparkleExtraScaleFactor = 3.7;
const flickerFrequency = 7;
const sparkleTravelTime = 5.0;
const letterOpacityStart = 0.18;
const letterOpacityInc = 0.06;
...
.to(devOpsPathSparkle, { duration: sparkleTravelTime,
motionPath: { path: devOpsSparklePath,
align: devOpsSparklePath,
alignOrigin: [0.5, 0.5], autorotate: false, ease:'none', pathStartOffset, pathEndOffset},
onUpdateParams: [this.incrementingingNumber],
onUpdate: function(incrementingingNumber)
{
var currentPosition = pathStartOffset + this.ratio * (pathEndOffset - pathStartOffset);
if (incrementingingNumber() % flickerFrequency) { gsap.set(devOpsPathSparkle, {fill: sparkleGradientBlueFlicker, scale: sparkleExtraScaleFactor}); }
else { gsap.set(devOpsPathSparkle, {fill: sparkleGradientBlue, scale: sparkleBaseScaleFactor}); }
if (currentPosition > letterOpacityStart && currentPosition < 1.0) {
if (currentPosition > letterOpacityStart) gsap.to(devOps_D, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc)) gsap.to(devOps_E, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 2)) gsap.to(devOps_V, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 3)) gsap.to(devOps_O, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 4)) gsap.to(devOps_P, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 5)) gsap.to(devOps_S, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 6)) gsap.to(devOps_dot, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 7)) gsap.to(devOps_C, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 8)) gsap.to(devOps_SecondE, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 9)) gsap.to(devOps_N, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 10)) gsap.to(devOps_T, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 11)) gsap.to(devOps_ThirdE, {opacity: 1.0, duration: 1.0})
if (currentPosition > letterOpacityStart + (letterOpacityInc * 12)) gsap.to(devOps_R, {opacity: 1.0, duration: 1.0})
}
if (currentPosition > .90) { gsap.to(devOpsPathSparkle, {opacity: 0.0, scale: sparkleBaseScaleFactor/5, duration: 0.3}); }
}
}, ">")