MindGamer

I have a lot of pages with different interactive applications that use Tweens but aren't part of a timeline. If all of those tweening elements were contained within a parent div, like this: <div id="gsaparea"> <!-- all active tweens live here --> </div> Is it possible to kill all tweening elements that are children of that div, by referencing that div id somehow? What I'm hoping for is a function like killTweensInside("divname"); Is that possible? Thanks in advance.

Yes, you're right, I should have been more clear. As you said, for Cumulative Layout Shift, only animations that affect height/width would make a difference. The issue seems to be on the Paint side of things. (Which it remains to be seen if they actually penalize us for). The issue is more LCP. If a DOM element is (for example) rotating, it looks like Google treats it as "still painting" from what I can see.

Ok.. thanks. Unfortunately I think this is going to be a problem with DOM animation of all kinds. It seems that an animated DOM element is an "unfinished layout" from Google's perspective. Three things that I'm playing with that may help other users ... I think it remains to be seen what works... but these may be worth a try? 1) Largest Contentful Paint is literally the largest element on the page. A placeholder loading image in the largest element (rather than having the element hidden or empty while loading) may 'count' as being already painted. 2) Delaying animation for a full second or two after DOMContentLoaded might also serve to separate the animation from the initial content paint metric. (This seems a little hacky though) 3) Not a great solution but maybe necessary: Start all animations on a user interaction and not automatically. Hopefully Google offers some better guidance on this, otherwise page animations onload might become a liability for SEO.

I'm noticing that many (if not most) of the pages where I have used GSAP are getting warnings in Google's Search Console under the newly added "Core Web Vitals" metrics. The metrics like First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift are all easy to impact using GSAP. Are there some general guidelines or rules-of-thumb that we should be following? Currently I load a main application using a Jquery onReady to trigger the load of the application. Apparently that's no bueno. But I'm not sure what the solution is because if I do it sooner, it's render-blocking javascript. If I do it later it's a slow LCP. Is there a best practice? Google isn't using CWV as ranking factors yet, but they say they plan to (probably not this year, I would imagine -- as they've just introduced the new metrics). I'm hoping to get my ducks in a row before this impacts my SEO. Thanks

Ah, perfect. Thanks.

Very general question here: I'm in mid-production on the homepage for http://wordmetrics.com and I'm thinking I've probably crossed a line in the sand in terms of CPU overhead. (It's live for now, but it's still a work in progress -- and mobile isn't really well implemented yet, I know) I'm thinking I'll probably start/stop animations on page-scroll levels in order to only animate 1 area at a time, (or move over to Canvas if that doesn't work) but what's the best approach to getting a read on "how much is too much" in terms of overhead? I should probably figure this out before adding another 5 animations to the page! Thanks in advance

IMHO it's not really clear what the problem is. It sounds like the issue could be solved by either modifying the grouping within Affinity prior to SVG export, or doing a replace-all on any positions in your SVG using a text editor. No?

Awesome! That worked! I set ::-webkit-scrollbar-track using a CSS variable, and then tweened the variable with GSAP per your Codepen above. 'Works perfectly. Scrollbars now looking very sexy in dark mode : ) Thanks!

I just wrote a simple "dark mode" switch for an SPA I'm building and I use GSAP to tween/toggle the application colors from light to dark colors, and back. It's working fine, but I'm having trouble tweening the colors of the scrollbars on the page. I have two divs with overflow-y: scroll; and the initial scrollbar styling is handled in the CSS with the ::-webkit-scrollbar-track pseudo-selector. Unfortunately the scrollbars remain a bright white color after everything else goes "dark" and it ruins the whole effect. I've tried TweenMax.to('::-webkit-scrollbar-track',1,{backgroundColor: "#000000"}); But that doesn't seem to work. And I've tried TweenMax.to('body',1,{scrollbarTrackColor: "#000000"}); ...and no dice. Is there any way to use GSAP to tween the scrollbar colors along with the rest of the page elements I'm adjusting?

Before DrawSVG it was maddening trying to work with SVG's across browsers.

Looks silky smooth to me, running in Chrome on my Macbook Pro 2015.

There may be a better way to to this, but I'd probably skip the repeat and the yoyo and call a function onComplete. That function would set a new set of random "to" coordinates, and then start another tween which calls the same function onComplete for a new set of randomized "to" coordinates. Etc. Etc. Cool CSS grain btw.

This is my workflow as well. Although I do the same thing with Affinity Designer to avoid the Adobe tax. It works perfectly. Grouped layers in Designer get ID'd correctly in the SVG output. Some things don't output well in either Illustrator or Designer though when it comes to SVG output. Layer effects are dicey. Some fill types are quirky. Transform Matrix does odd things. Etc. The trick is to use just simple lines and fills without using more advanced vector features/effects.

CSS inside noscript... Good idea. I never thought of that. Thanks.

General question about SEO and GSAP I frequently use GSAP to fade-in elements on a page. The elements will typically start with a default CSS opacity set to 0. I'll fade the elements in by tweening the opacity to 1 using GSAP once the DOM has loaded (by using jQuery .ready() or whatever framework I'm working with). I'm just starting to wonder if I'm taking a hit to SEO when I do this? Does anyone know if this technique constitutes "hidden content"? I know that Google supposedly spiders with Chrome and executes Javascript along the way, but what I'm not clear about is whether or not Googlebot takes the requisite time-delay / fade-in into account. Does anyone have any experience with Google penalizing a page for hidden content if the content is faded into view after the page-load has completed? Thanks

Nice! Adomatic looks like a cool tool, but IMHO $500/mo is steep pricing. $6000 per year for full / non-limited use of the tool? Yikes. Adobe CC is basically free compared to that.

This is a great thread, and although it's a few months old, I'll chime in with a few things I've discovered along the way: Some business-side conclusions that I've reached after several banner projects: It's really only ever worth it to sell full sets of multiple sizes. There is pretty much no reasonable price that works for one or two GSAP banners. I do a minimum set of 5 sizes. And I try to do 10 so they can split test two versions of the creative. I do almost all the initial design on a 300x250 storyboard and then apply those design decisions to the other sizes. I don't storyboard each size. I start with the 300x250 for a couple of reasons: First, it's easier for clients to get their brains around design decisions on the more familiar 300x250 format. Secondly, it's much easier to repurpose existing print-media / broadcast-media content to the 300x250 format. This gets the ball rolling faster on the approvals front. I charge per banner, but as others have said, the first banner takes 3x the amount of time as the resizes (or more). I don't begin other sizes until I have final approval on the first size. But I regularly have to push back on design feedback on the 300x250 if it represents a design decision that will be difficult to implement on the following sizes. Canvas is a bear. In my opinion it's not worth it (for me) at this point. I can move much faster with DOM elements. If the design requirements are a clear call for canvas I alert them to the fact that they're about to incur additional costs. And some workflow discoveries: I do all my layout in SVG using Affinity Designer. And I name my layers in Affinity before SVG export. This automatically names my paths with id names so I don't have to do it manually. I embed all SVG's inline in the HTML document (using Sublime). When I use PNG's I often (but not 100% of the time) make the PNG sized the entire size of the banner so that I can quickly position it at top/left: 0,0 as a starting location. In other words if my 'sprite' is a small 50x50 circle, I'll still export a full 300x250 (or whatever the ad size is) transparent PNG with lots of transparent space. I don't do this if there are dozens of moving elements, but it works like a charm with 1 or 2 moving elements. This speeds things up considerably from a workflow perspective and saves me the trouble of tweaking and reloading to get initial placement locations. Lately I've been playing with single-file HTML5 ads. I *think* this is a superior workflow but the verdict isn't in on this yet. In other words, I inline all my CSS, HTML, SVG and my GSAP-tweens into a single .html file. (I have a template file I use for all new ads). This makes for extremely fast-loading ads with minimal http calls. 'Would love to hear ballpark prices (and geographic locations) from independent devs out there. I do find it's often hard to communicate the additional amount of work required for animated HTM5 ads over Flash ads. There doesn't seem to be a great understanding of those issues yet. Mostly because when you say "HTML5", most people really have no idea what that means. Whereas everyone knew what Flash was.

Thanks @joe_midi That's super helpful. I guess that means though that there's no one-size fits-all HTML5 clickTag script that you use -- meaning you'd have to know whether it was flighting via DCM or DC Studio?

You mean you specify your own clickthrough URL? Or you actually give https://www.google.com as the URL and DCM updates that? I still find it a little odd that if they're doing a regex change or setting a global variable that we would need to specify any clickTag at all... Wouldn't we just be able to leave out the clickTag entirely if that were the case?

@Somnamblst Thanks for that. I'm trying to understand the reasoning behind setting the URL as a variable. You posted: <script type="text/javascript">var clickTag = "https://www.google.com";</script> Isn't that a hard coded URL? How do users of DCM change / pass the clickTag from DCM? Or maybe I'm completely misunderstanding this: When you assign clickTag='http://www.whaterverurl.com'; does that get overwritten with DCM? If so.. what's the point of setting it? If not, is there a way to set it up so that campaign managers can set the URL via DCM?

Thanks a ton @joe_midi. That's a huge help. So just to make sure I'm understanding this correctly: First we load the enabler in the <head> <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script> Then we initialize it at the end of the page and check for ad visibility: <script> if (!Enabler.isInitialized()) { Enabler.addEventListener( studio.events.StudioEvent.INIT, enablerInitialized); } else { enablerInitialized(); } function enablerInitialized() { // Enabler initialized. // In App ads are rendered offscreen so animation should wait for // the visible event. These are simulated with delays in the local // environment. if (!Enabler.isVisible()) { Enabler.addEventListener( studio.events.StudioEvent.VISIBLE, adVisible); } else { adVisible(); } } function adVisible() { // Ad visible, start ad/animation. } </script> And the animation starts in adVisible() But... where I'm still super confused is the exit Enabler.exit("Click on BG"); How does exit() get called? Does Enabler.exit() get called onclick from some element in the ad? Do I need to set that up? The example in the docs shows "Click on BG" passed to exit(), but in the documentation exit() takes two parameters: id and opt_url What's the id parameter? Is that a clickable element on the page? Does calling exit effectively set up a listener at the passed id? (Unfortunately I have no access to Studio. I'm working on creative for someone who does)

Thanks Oliver That much I had already. It looks like that's a hardcoded clickTag though. I was looking for non-hardcoded clickTags that could be set within DoubleClick though. I found the answer with the Google/IAB getParams function which allows clickTags to be passed on-the-fly to the creative using DoubleClick. (Passed in the query string).

Now that DoubleClick is hosting GSAP, I'm going to do a creative for DoubleClick ground-up in GSAP. Can anyone offer any advice on how to manually create clickTags which will allow everything to be configured via DoubleClick? Looking for a good resource or code snippets.

The simplest workflow I've discovered so far is to do all of the layout in Affinity Designer. ... Or you can use Illustrator if you feel like working more slowly Then use SVG's to handle 100% of the positioning. Export as SVG. (Note: Affinity layer / group names will become path ID names after SVG export -- this is huge) Paste SVG code into HTML document for inline SVG. Use GSAP to animate the id's / Affinity layers. This saves an enormous amount of time spent on the initial positioning of objects and lets you do most of the layout / design in a GUI rather than endless code/load/code/load position tweaking.

Awesome! Thanks. That's exactly what I needed. @osublake's code here was a huge help: https://codepen.io/osublake/pen/5a3c63e172d177f9c1b257ceba37378b