Iamattamai

Thanks Zach. Definitely was not pointing fingers at GSAP - I realized it was farther-reaching but in desperation was hoping another animator had experienced and solved it. Tried your suggestions to no avail. Same monitor on another computer running Edge and no white trails. Dumbfounded. Would love to just write it off, but I have to wonder why and if somebody somewhere with the just-wrong hardware/version combination has a bad experience. Anyway, many thanks - and I learned something about will-change too.

Has anyone ever seen an image or svg animation superimposed over another image leaving behind a trail of thin white borders upon movement? I would love to share a codepen but it only happens for me using Edge and only with a specific Dell remote monitor plugged in. I'm pretty sure the monitor isn't defective since I have another identical that behaves the same way. Here's the strange part - it doesn't appear on the host laptop and if I open my laptop the behavior disappears on the remote monitor. Close the laptop and the white border trails are back. Doesn't occur using Chrome at all on the same hardware combination either. It also doesn't seem to appear if superimposed over a solid colored background, only images, Edge, specific monitor. I'm stumped. Borders, margins and padding all set to 0, backface-visibility: hidden I don't come here lightly - I've scoured the developer forums and can't find anyone else discussing it and hoped someone here might have seen it or have ANY suggestion.

Jack: Sounds better in the promise of backwards compatibility with the previous syntax, but I just tried it with my older working code as-is and no-go. I didn't pursue beyond that. Nevertheless, I think it might be easier to adapt to for those not expecting the addition of an attr: designation. In any case, I got gsap3 working with my matrix transforms and I'm happy thanks to you and Zach and Blake. Thank you all for your help. Have I already mentioned that this forum ROCKS?

Okay, I continue with codepen challenges so I'm just hosting an example myself here: http://www.eyedea.co/matrixtest.html Note that I have embedded the older version of GSAP and it works fine. If I simply sub that out with GSAP 3, it doesn't work - I understood backwards compatibility to be a given. Nevertheless, I tried updating the code to the following with no success: tl = gsap.timeline(); tl.to("#mlupper",{transform:"matrix(.943, -.332, .332, .943, -30.617, 47.676)", duration: gdur},0)

I'm manipulating SVG body parts using GSAP. They are created and positioned using Inkscape which outputs the SVG using matrices. There are some 20 body parts and currently 20 positions (more slated) - so say 400 matrix transforms in the application right now. Works fine with the old GSAP. I could provide a codepen, but I think conversion is impractical, and losing 50K in file size is the only real obvious upside I see to converting. I think staying with the tried and true is my best strategy for this application. I did manage the convert for another application and I do like the cleaner code and ending the confusion between all the products, max/lite/timeline/etc. As always, thank you for your speedy replies - this forum is amazing.

I have some legacy code leaning heavily on matrix transforms. I thought I would upgrade to the latest and smaller version. I tried substituting the core GSAP3 code for my original TimelineMax and none of the matrix transforms work. I then rewrote to the new syntax and still no-go. Is there a plug-in required?

Yes, Zach got me working. Thank you for the tip on the return - that might help going forward. I missed that in the documentation. Could explain a lot of things. BTW, this forum ROCKS - everyone is so responsive and helpful - even on a Sunday - and follow-up is amazing.

Thank you ZachSaucier, that seems to work. I don't understand the prior behavior, but will settle for any solution that works after hours of frustration.

Sorry, I couldn't get CodePen to play this snippet so I had to host it myself here: https://www.eyedea.co/imgtest.html I suspect the base64 images were too big for it to process. Anyway, could someone tell me why I am getting three different behaviors at the end of this short animation? If you refresh it, you can alternately get a blank screen, arms down, or suddenly arms up - which is the last image in the series. My preference would be for it to come to rest with arms down. I cannot understand why the arms suddenly jump up at the end. I've tried every combination to stop it and I can think of and toyed with immediateRender but still get this unpredictable behavior.

Thanks. That came right out of Inkscape, but I might have cut and pasted haphazardly.

That explains a lot. Thank you for your generous sharing of your time Mykel. I'll continue to troubleshoot.

Thanks for the suggestion Mikel. I tried what you are doing using the 6 paths in my drawings but getting nothing - see attached codepen. What am I missing? https://codepen.io/iamattamai/pen/QXpMXW

Sorry for my lack of clarity and thanks for your prompt response as always. The images are on top of each other, but the bottom one is of slightly larger size and I wanted to hide the excess of the lower part while the upper is visible. See my codepen below - and BTW, thanks for creating one so I could examine how its done. https://codepen.io/iamattamai/pen/ydMJQG Note the "double chin" created by the underlying image - I would like to eliminate that in a way that doesn't result in a transparency that would show any underlying images.

I've been struggling with this for a few hours and thought I might reach out for some expert help. I have two images for which I want to alternate opacity back and forth between the two but not in a binary way - a little softer in the transition. I'm using the snippet below, but it results in a transition period between the two elements when neither element has full opacity and it reveals the background layer. I would like to create an overlap of the tweens such that there is a gradual transition maintaining full opacity in combination yet maintaining the general frequency - not speeding up or slowing down. I've tried tweaking the values but can't seem to find the right combination. t4 = new TimelineMax(); t4.to("#closed",.15,{opacity:0, delay: .3, repeat: 20, repeatDelay: .15, yoyo: true},0) .to("#open",.15,{opacity:1, delay: .3, repeat: 20, repeatDelay: .15, yoyo: true},.0)

Hey Jack. Thank you SO much for your help. Between your progress idea coupled with the _gsTransform nugget I created an external matrix converter for my purposes. Since I have to handle and modify the matrices between applications anyway it works well for my needs and there is no conversion delay. Seems the problem with my attempted implementation of your function above was with the reference to var tween, in case anybody else comes down this path. It was a brilliant piece of code. I didn't troubleshoot any further to root out my issue with it. And Saturday support is WAY unexpected - you guys rock.