Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by MindGamer

  1. 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
  2. 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?
  3. 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!
  4. 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?
  5. Before DrawSVG it was maddening trying to work with SVG's across browsers.
  6. Looks silky smooth to me, running in Chrome on my Macbook Pro 2015.
  7. 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.
  8. 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.
  9. MindGamer

    SEO and GSAP

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

    SEO and GSAP

    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
  11. 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.
  12. 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.
  13. 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?
  14. 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?
  15. @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?
  16. 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)
  17. 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).
  18. 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.
  19. 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.
  20. Awesome! Thanks. That's exactly what I needed. @osublake's code here was a huge help: https://codepen.io/osublake/pen/5a3c63e172d177f9c1b257ceba37378b
  21. I'm trying to think of a way this can be done with GSAP: I'm currently porting this site: http://ifate.com to HTML5/JS One of the Flash effects that's used throughout the site is the "gleam" or "phong" that you see rotating around the curved borders of content areas. You can see these 'gleams' moving around the main content area in the top left of the homepage. This used to be done pretty easily in Flash with masking, and rotating a gradient object behind the border mask. I've tried doing the same thing with CSS Masking and the result is very processor intensive, super janky and doesn't look great. So now I'm trying to approximate the same effect using DrawSVG which seems to be much faster/smoother. The problem is that I don't think I can achieve the necessary gradient effect using SVG gradients animated with DrawSVG. Here's my lame attempt to do it with multiple overlapping SVG paths.... Not great. The staggered colors are much too visible for me. https://codepen.io/Bangkokian/pen/QEZGkj Is there any way to apply a real gradient to a tweened SVG? The second issue that I noticed immediately, is that when you use DrawSVG on a circle or closed shape, there's a little jumpy weirdness around the point of origin. (In this case, at the top right of the box in the Codepen above). Is there any way to smooth out the transition from 100% around to 0% to 'rotate' the visible part of an SVG path around closed shapes? I tried animating the SVG from 0% 5% to 100% 105%, but that doesn't seem to work. Is there an approach to minimize this jump?
  22. I'm trying to scale an ad down to the 150k filesize restriction that AdWords enforces, and I think my best bet is to move from TweenMax to TweenLite on a couple of creatives. I've actually never really used TweenLite as filesize hasn't been a major issue for me until now. Is there a concise feature-comparison chart showing what features I will need to pull from my TweenMax tweens in order to make them work with TweenLite? Thanks.
  23. Not specifically a GSAP question... but relevant to all GSAP ads: I'm trying to figure out if it's customary to include CSS reset within HTM5 ad code. Obviously, it's important to control for style inheritance -- but is that something that's typically done at the creative level? Or is that something that's typically handled by an ad server? On a more macro level: Anyone know of a basic style guide for delivering HTML5 ad creative? (Facebook, Google, etc). Thanks
  24. Seems like the issue is almost certainly the image size. Aside from forcing 3D, you could try animating a scaled, low-res image and then swap it for the high-res image onComplete. 'Might give the GPU a little more slack during the tween. 'Just a thought. Or use canvas instead.