Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

33 Newbie

About MindGamer

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  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?