MichaelGaddis

Take a look at my website at www.gaddislabs.com. That should be self explanatory for what I can do, in particular check out the animation gallery (Animations @ GaddisLabs), additionally I have 3D capabilities with Threejs check that out (ThreeJS@GaddisLabs). I do full websites or can plug in animations as needed to an existing website. If you need server work I have that stack too. Email me at Info@GaddisLabs.com

Thanks, you answered my question. It’s a bug somewhere else.

Simple question, (I hope) I want to have a bounce on an object I'm moving inside a (rather complex) SVG. The drop looks like this: Does the CustomBounce ease work with an SVG attr delta on a cy value? For instance: (The stones moves where it's suppose to but it doesn't bounce.) Ifv it should work on an attr: cy move then I have a bug and I'll search for that... Thanks in advance import { CustomEase } from "gsap/CustomEase"; import { CustomBounce } from "gsap/CustomBounce"; gsap.registerPlugin(CustomEase); gsap.registerPlugin(CustomBounce); CustomEase.create("gameDiskBounce2", "M0,0 C0,0 0.103,0.819 0.228,1 0.273,1.066 0.231,0.928 0.312,0.928 0.354,0.928 0.35,0.91 0.388,0.976 0.403,1.003 0.418,1 0.468,1 0.524,1 0.509,1 0.556,1 0.596,1 1,1 1,1"); bunch of code... gsap.to(this.stoneDOMRef, {attr: {cy: RowSVGCyArray[row - 1]}, ease: "gameDiskBounce2", onComplete: ()=> { this.updateStoneLocation(callbackWhenAnimationCompleted, column); }});

Thanks guys, you're confirming my fears ?. Since this is just the front-end marketing website we may just rewrite it in React/Bootstrap/GSAP and put it in Azure where they have their production stuff. Thanks for responding so quickly.

I have a client who wants to integrate some animation I've done for them into their site. They use Wix for their entire site so I need to install GSAP into Wix before installing the javascript for the animation (which I'm told Wix doesn't allow). I use MorphSVGPlugin so I need the core library plus that addOn. Any advice on how to do that? I've chatted with Tom B.@Wix and I have briefly looked at the clients website's Wix editor page. What I have seen does not give me a lot of hope for an easy install but maybe you guys have done this before. Tom suggested a separate site loaded into an iframe on the Wix site but that seems problematic for screen resize actions, event handling etc. If I can get raw javascript files into the site then I suppose I could put my code with the GSAP minimized libraries into a single install. Not a great solution perhaps but a kludge is better than nothing sometimes. Searching for any advice...

Okay Mea culpa... It wasn't GSAP, GSAP was doing what it was meant to do. I had the color of each letter set to "f7f7f7" instead of "#f7f7f7" and Safari was autocorrecting for me while Chrome and Firefox were not. An obvious error but sometimes you can stare at it for hours and not see it. Kinda like being nose blind to your own stink...

Thanks for the quick response. I've been kludge testing around the "bug" by getting rid of timing and just "get one of the letters out." I'll let you know what I find when I find it. It may be more exotic...

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}); } } }, ">")