• Content count

  • Joined

  • Last visited

Community Reputation

74 Contributor

About davi

  • Rank

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

2,714 profile views
  1. I like the idea, very ambitious I'm on a Mac so can't test but would love to. My only quip with apps like this is file handoff, it'll require the next person to know how to understand the app in order to modify it. The difference between this and another app such as Animate CC from a user standpoint is that Animate CC already has a massive community of ex-Flashers that already know the app. Yeah, I know it's spits out clean code that "can" be edited but that wasn't the original format in was authored in (I'm assuming there's some sort of authoring file that this app works off of and it generates a different file -- but I could totally be wrong since I wasn't able to test it). This, unfortunately, is what I think what would stop something like this from catching on from the dev community. What I think this would be a good component for, is creating modular blocks of code for GSAP hand-coders, or for when it's too much of a pain to try and hand-code something (i.e. character animation). Perhaps it can generate a block of code with a GSAP timeline that can be inserted into an existing GSAP timeline, or have an option to, some sort of process that makes that portion simpler. A way for non-coders to work with folks who code as well. More of a "component helper" to GSAP coders, rather than a full-on hand-coding animation replacement. Perhaps it's a tool similar to Lottie/Bodymovin where it solves a specific niche. Or, I believe you can include CSS/JS inside of the SVG format, maybe this app could include everything, including animation, in a self-encapsulated SVG file (I believe I was reading a thread or post somewhere from Chris Gannon (that super-talented SVG animator) who was trying something like this out. Oh yeah, found that link. "Stop the madness!"-- lol.
  2. Basic question about exporting *Newbie Alert*

    No. Use Quicktime Player (app that comes with Mac) to do a screen recording (File > New Screen Recording). Depending on what version of OSX you're using, it'll record either ProRes (super) or MP4. MP4's will look like crap if you're using the color red though.
  3. Basic question about exporting *Newbie Alert*

    You can use the Intersection Observer API to determine if it’s onscreen and then some other simple JS method to trigger the start of the Animate CC animation (like calling to the GSAP TL to play back) as the user scrolls down. I believe you can also use IO within the iframe's code too, so it can still be separate from the CMS. Lots of IO libraries out there too to make it easier > https://github.com/russellgoldenberg/scrollama https://xtianmiller.github.io/emergence.js/ https://github.com/w3c/IntersectionObserver As far as videos, you can try exporting video but it may not work. I typically just use QuickTime and do a screen recording, then trim/crop/etc in AE (or use ScreenFlow if you have it).
  4. Yep, not having those would be a deal-breaker for me as well. I mean, I guess you could go into the source code and manually edit that or add code in, but that kinda defeats the purpose of this tool.
  5. Code doesn't seem to work on Safari

    Like Dipscom said, it'll be best for you to spend a few mins setting up a CodePen account and initial pen to help us help you out. I'm not able to see what's going on without rebuilding your file on my end but... Just a quick glance at your code, my initial thought was do you NEED to be using clip path for the mask effect. Looks like you're using a simple rectangle to clip with. You could nest the content in a container, use overflow:hidden, and adjust or animate the width and height of the container to mask it. If it's an angled mask, you could rotate the container one way, and then rotate the child nested content in the other direction to make it look straight again (if that makes sense).
  6. Banner Work

    Might just be the state of the industry, ad fraud, ad blocking, and possibly more of the budgets being allocated towards social / video. Might also be specific advertisers, I believe I read some advertisers were cutting budgets for them a while back unless the ad fraud thing got worked out (P&G, Unilever, etc). I don't think it's going away though, someone's gotta pay for the internet. Think Amazon's just getting in, so someone's gotta make them.
  7. That's definitely easily editable. Thanks for sending that example. I'd like to be a tester when the Mac version comes out.
  8. Sounds cool, wish I could review but I'm on a Mac. Let us know when a Mac version is out! My only concern (and it may not even be an issue), is that the app would be required to edit the file once it has already been created and the developer would need experience with using it. I saw the code editor portion but is the code it generates able to be easily edited without the app? File handoff and editing files at a later date is important and something that's more of a GSAP "helper" would be more useful to me than a standalone app that tries to do it own thing (think Adobe Edge, GWD, Hype, etc -- that aren't very easily edited outside of the app and generate their own mess of code). Is the code that it generates more of a standard GSAP workflow? (Think file setup like in this GSAP article, which uses timelines, master timelines, nesting etc etc). Outside of the GSAP library, does it have any other dependencies? If so, what are the file size of that? Are there other things that add to file size other than your obvious assets (fonts, images, etc)?
  9. It likely has to do with the unique id in the default code in the html file. From 2017.1 - 2017.5, they introduced a unique number called "composition id" that gets created for each "new" FLA created. I put quotes over 'new' because if you copy the FLA file it still uses the same comp id (You have to create a new file from the menu up top to get a new unique comp id). In the JS file it exports out from a normal HTML canvas export, you'll see something like this > lib.properties = { id: '24565gh6788...blahblahblah'... This gets referenced in the default HTML that is exported out. Animate Commons probably doesn't have that included in it since that was created before that change was made by Adobe. You can probably get it to work by implementing that compID check in the file that gets exported.
  10. Try this instead, adding the keyword this to replayBtn (this is if this code is in a FRAME script wherein the replayBtn is accessible within that frame number) > this.replayBtn.on("click", function() { til.invalidate().restart(); }); or if you're using the default HTML it exports, you should end up with a reference called exportRoot, which you can use if you can't figure out scope (just replace this with exportRoot and it should work). How scope works in Animate CC --> var til = "blah"; // Frame-level Scope this.til = "blah"; // Movieclip-level Scope til = "blah"; // Global Scope
  11. My first thought was that DoubleClick might be automatically injecting code into your banner after you've delivered it that may have issues with your own code, so the actual trafficked ad is getting code added to it that you didn't create or QA. This is that typical code that gets injected (see below). You may have noticed this code if you've ever looked through the source of a banner ad online. You may want to ask if the actual trafficked ad had this code added or see if you can find one live and check the source and QA from there. Perhaps mobile is picking this up differently than desktop or there is some issue with that code and the template. <script type="text/javascript"> (function() { var relegateNavigation = ''; var handleClickTagMessage = function(e) { try { var eventData = JSON.parse(e.data); } catch (err) { return; } if (eventData.isInitClickTag) { if (eventData.clickTags) { for (var i = 0; i < eventData.clickTags.length; i++) { var clkTag = eventData.clickTags[i]; window[clkTag.name] = clkTag.url; } } else if (eventData.clickTag) { window.clickTag = eventData.clickTag; } relegateNavigation = eventData.relegateNavigation; } }; if (open.call) { window.open = function(open) { return function(url, name, features) { if (relegateNavigation === 'parent') { var message = {'clickTag': url, 'isPostClickTag': true}; parent.postMessage(JSON.stringify(message), '*'); } else { var args = [url, name]; if (features) { args.push(features); } open.apply(window, args); } }; }(window.open); } if (window.addEventListener) { window.addEventListener( 'message', handleClickTagMessage, false); } else { window.attachEvent('onmessage', handleClickTagMessage); } })(); </script>
  12. Getting a blur effect in Animate CC

    Not sure about Pixi and Animate CC, it likely has to do with the setup and how both work with each other. Never crossed my mind to use the two together but I'll be looking into it. You could simulate that effect within Animate CC without having to use Pixi. It's not (currently) possible to natively animate the native filter effects in Animate CC since they've disabled that for performance reasons (see this link, Filter and Color Effects section). However, like that doc recommends, if you make a separate clip with the filter applied to the object, you can tween that clip overtop of the other clip (fading the blurred clip in and out), to simulate a blur effect. Sounds like the animated mask was a separate issue (it is possible, and easy, to do that with Animate CC using the timeline -- just make a keyframed mask layer with no tweening). As far as creating an animated mask via hand-coding with DOM elements, I guess you could use SVG for the mask and create a sequence of masked clips that you turn on and off. Otherwise, I don't think it's technically possible to do animated masks with actual DOM elements unless you're just using rectangles and square masks, you're back at using canvas at that point, and might be a fairly complex task to do if you're not familiar with it. it'd be cool to see some sort of library / plugin to make doing this specific task with canvas easy (cough cough). Agree that you should learn to hand-code too and make that part of your arsenal but don't throw away your timeline skills! There's a reason why apps like After Effects exists
  13. Google doesn't allow longer than 30 seconds?

    The spec for animation that the IAB set has always been 15 seconds, not 30 seconds, and still is in the IAB's new specs (see page 17 under Animation). Autoplay video is still 15-seconds too (page 19). I'm, personally, glad this is a spec, and would actually prefer it to be much shorter, like 10-seconds. No one wants ads that continually use up resources or screams look at me. The link above and Ohem's links contain pretty much all best practices you should be using. The new specs aren't as wide spread yet but I'd imagine this will be changing quickly this year.
  14. Timer with GSAP

    You're totally right! That was throwing me off for a sec. Happy hour at the desk not makin me think straight. Happy Friday!
  15. Timer with GSAP

    I do them often, never had any issues. Typically a tune in time for shows or movies (i.e. "Starts tonight", "Starts tomorrow", starts on this date, etc. The only issue I really see with yours is getMonth starts at zero, not 1. So d.getMonth()+1 == 11, would be December, not November. Your fallback could be a something similar to what you have now but perhaps use a switch statement with a default case.