flysi3000

D'oh! I hesitated for a second when I was writing that... thanks for correcting me. :)

Hi @Vicky27! You have a pretty good start here. A couple of things, though - like @geedix says, you're mixing GSAP 2.X and GSAP3 syntax here, so be careful with that. You no longer need TimelineMax, as it's included with GSAP - just use gsap.timeline(). Also, get used to using the < and > notation at the end of your tweens to insert your animations either at the end of or the beginning of the previous animation. I find it much cleaner than using the delay property. For example, if I have animation A and animation B, I can write something like: // pseudocode - just to give you an example gsap.to(animation A, {...}) gsap.to(animation B, {...}, '>') One other thing - autoAlpha and opacity aren't the same. I find it easiest to pick one and use it consistently. Opacity turns a thing invisible; autoAlpha turns it invisible and sets it to visibility: hidden, which removes it from the document flow, meaning you can't click on it and stuff like that. As far as your images, once again, @geedix is correct, in that you can either use <img> tags, or <div> with background images set in css. If you choose the latter, go ahead and use your @2x resolution image (ie. twice the dimensions, as you said), but using css, just set its background size to cover. I tweaked your code a little bit here, with some comments to explain what I was doing! https://codepen.io/flysi3000/pen/OJwWwWb?editors=0010 One last thing, if you are interested in learning from someone that I learned a ton from, starting way back in the Flash + ActionScript days, check out @Carl's site, https://snorkl.tv.

Thanks @Jonathan. It was the latest versions of Safari on the latest version of macOS 12, but only on non-retina screens. I seem to have fixed the problem in the interim, using a combination of the fixes suggested above. Interestingly, I tried replicating my problem on CodePen (with a crap-ified version of the client's artwork), but couldn't get the same blurry scaling issue, though, so ultimately, I'm not sure what was going on!

Thanks @greensock! I know it's not a GSAP thing, so I really appreciate you taking the time to share some tips!

Hi @Cassie, yeah I tried force3D: false; I’m bringing the svg in at about double the size I need it at and scaling it down. Again, it looks great on all the browsers except Safari on non-retina displays.

It's that time... resurrecting this topic, with the caveat that I only see the blurry svg on Safari on non-retina displays. Sorry, I don't have a codepen; just wondering if anyone has seen this, or has any tips for a fix. 🤞

Aha, I think that was the part I was missing - how to grab the current target. Thanks, I’ll give this a shot!

I feel like this has to have been asked before, but if so, I can't find it. I'm trying to replicate a text typing animation, with a blinking cursor (or insertion point) that follows the text. Animating character by character with SplitText is easy, but does gsap expose a property where I can I figure out the position + width of the current character, and position my blinking "cursor" relative to it? Or am I approaching this in the wrong way? Thanks y'all!

Ha, I found that immediately after I posted this - thanks!

Hey all, I'm looking for the GSAP 2.x demo of using the Modifiers Plugin to make an infinitely scrolling carousel. While I'd love to use GSAP 3 as shown in this example, I have to use GSAP because our animation tools haven't been updated quite yet, and I need to get some client work out the door. Any pointers for where I can find the older syntax? Thanks!

Ah, true, true... I was just curious and thought I'd ask here cuz I figure this is a pretty in-the-know crowd.

Hearing more and more about Lottie lately (plugin for exporting animation from After Effects to JSON), and as I understand it, the real obstacle to using it for banner animation is the weight of the js library. Now that support for it is coming in Adobe Animate, might we have a strong enough case to get it white-listed (like gsap, createjs, etc)?

Chiming in, just because I saw this the other day as well and had the same freakout, but then I realized that it happened when viewing our ads in a private window in Firefox. When viewing in a regular tab, I think it's okay, but it bears a little more research (which I haven't had the time to do yet).

Whoa - that page is a treasure trove of helpful stuff! Thanks!

Woo! I actually used easeInOut on the main tween, and stepped the other one - so the inverse of what you suggested. Seems slightly more noticeable, but I guess in essence it's the same thing. Thanks for the speedy reply!