flysi3000

Hi! I'm trying to use the amazing MotionPathPlugin for a little animation of a series of objects that fall and bounce onto a surface. I've gotten the object following the motion path, but there are a few things I don't understand. It looks like the animation starts in the center of my container, and I can't seem to override that - I'd like the objects to start offscreen and animate into position and land on the blue surface. Also, I have MotionPluginHelper going, but the path looks like it's flipped 180 degrees - I'm sure it has to do with the path direction, but I'm not sure how to reverse it. Finally, if you hadn't guessed, these will end up being in some banner ads, and I'll want to resize them for a couple of different dimensions; is there a clever strategy to make this flexible for those different dimensions (ie. make them sort of "responsive")?

I'm not sure if I fully understand what you're going for, but it sounds like you need to change the origin point of where the image is scaling from, I.e. the transform-origin of the image. By default, scaling happens from the center of the image, or half of the width and half of the height: transform-origin: '50% 50%' or transform-origin: 'center'. You can change those numbers so that the scales from any position - it could be the top left, bottom right, or some arbitrary point in the image: gsap.set(img, {transform-origin: '0 0'}) gsap.set(img, {transform-origin: '100% 100%'}) gsap.set(img, {transform-origin: '63% 32%'}) // note that you can also set your transform-origin into your .from() tween gsap.from(img, {duration: 29, scale: 1.2, ease: "power1.out", transform-origin: '63% 12%'}, 'img') You just have to figure out where you want it to start scaling from and uses those percentage values. I often eyeball it and use approximate values, but you could use something like Photoshop to figure out the exact percentages. Oh - and you only need to set it once - unless, that is you want to scale the same image again from a different point later. Hope this helps! :)

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!

Hi! I have a hypothetical question - some creative feedback I got for an animation was to make it more "stop-motion-like" but at the same time, add some easing in/out to it. My initial reaction was that this is self-contradicting feedback, but then I thought that if I were actually shooting some stop-motion animation, I could actually add easing by adding more frames at the beginning or end of the sequence. Is this something we can simulate with GSAP? I'm currently using SteppedEase, and was thinking I could take my existing tween, and tween its progress with an easeIn/Out applied to that. Is that nuts? Is there a better approach?

Thanks for the input, guys. @geedix I was looking at those specs; I think we had more than 10 external images, though - that's probably why we got the banners kicked back. I ended up solving it using a couple of gulp tasks to parse the js for image file paths and base64 encode them inline, then inline the js into the index.html file. I managed to get the files down relatively small, but I had to start with non-retina images. It was a lot of f*cking hoops, and I told our producers it seemed really excessive, but we just wanted to get these out the door, so I didn't push the issue too much.

Hey banner fam, question about a spec we received for some ads being served by Amazon. Our units are getting kicked back, because they say we need to minify scripts, and combine linked javascript and images into a single index.html file to minimize network calls. The minifying and inlining of scripts is one thing, but have you guys had to do this with images before? I'm looking up ways to use gulp to do all this automatically, but I'm spinning my wheels a little bit. Right now my approach is to try and parse the minified js file for file paths, then replace those file paths with the converted base64 data. All of this seems excessive to me. Right now, our build script spits out the following folder structure: +--build | +--my-banner | +--index.html | +--scripts.min.js | +--.jpg | .png | .svg images It would be great to be able to run a gulp process on the contents of the build folder to put the contents of each banner into a single index.html file, cuz it seems like that's what they want. Any pointers in the right direction would be awesome.

Gotcha - yeah, I was wondering about that. Cool, well it's helpful to know that's how some people manage their campaigns. Thanks!

That makes sense - thanks! Do you guys use the same workflow for bigger campaigns? We sometimes have buys that are like 64 units and more (many, many more... ?).

Nah, if there's blame, I think it can be divided between the excessive use of tracking scripts by publishers, and the scummy ad platforms that try to inflate their ad views to rake in more $$. And, yes, devs that are sloppy and get lax about best practices. (raises hand)

Hey! Are any of you guys using something like JIRA or Asana in your organizations to track your banners? Any recommendations or outlines for workflows or best-practices?

Hey! So, I went to the AMP Ads workshop at Google's NYC headquarters a couple of weeks ago. It was great to get to meet the Google team and hear the justifications for AMP, and also to voice our questions and concerns about the road ahead. There were representatives from five different agencies or production houses there (including myself), and without fail, the number one thing that each of us begged for was GSAP support. The Google engineers had apparently considered integrating animejs a while back, but balked at the 16k size of the library; GSAP is closer to ~30k, but they obviously are aware of how much we lean on the platform, so we'll see what they come up with. They're also considering implementing Canvas, which will open up some alternate avenues for us to do cool things like particles, etc. One other thing - they asked us to provide sample creative units that we had built beforehand, and at the event they showed us our regular html5 units that had been converted with an internal tool (kind of like Swiffy, back in the day!). They looked great, minus some interactivity (hover-state animation); the thought is that such a tool could get us 90% of the way to a finished unit. I don't know when/if it will become widely available. Anyway; other things to consider: - re. security, there are more and more stories like this one, of shady ad networks perpetrating ad fraud - not only is it a matter of security for users, it's also a matter of site performance, which impacts users' data and battery performance - the uptick in AMP ads served is increasing - the AMP HTML project is open-source, so you can contribute by making or improving components, etc. - GWD outputs AMP ads - as mentioned elsewhere, Adobe Animate will also output AMP. I saw a couple of sample units from the prerelease of this, and one was wack, but the other looked pretty impressive - AMP ads work anywhere, not just AMP pages That's it; hopefully, if someone from the AMP team checks out this post (which they've seen ?), they'll correct me, or fill in details!