davi

Run a quick test for us: - Go into your published JS file that it exports. Do a search for "StageGL". It should appear more towards the bottom of the file in bootstrap callbacks section. - Change to "new createjs.Stage()" rather than "new createjs.StageGL". Then let us know what happens.

Didn't work for me. Tried Safari and Chrome, using GSAP-based banners and an Animate CC-based banner. After uploading, I just get a blank screen with the banner title in red. Sometimes "Undefined variable: y_axis" appears, not sure what that is (I searched all of the code in the banner and that's not even in there). I also got "Illegal string ''offset 'images'" on one of the ads I uploaded to test with. Opening the config file that appears just shows curly brackets. Sounds promising, and love the idea of the single HTML page if it actually does create a smaller file than manually optimizing – although I don't think I'd send a client a purple and pink preview page Kinda like AdPiler > https://adpiler.com/features/

Yeah, this is how banners that have movie or show times are created, "tune in" dates (i.e. Show date, out tomorrow, out today, etc). Use the JavaScript Date object > https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/ Depending on your needs, it can be simple or a bit more complex. Typically, with movie or show banners, you just use 3 scenarios or outcomes > Coming out today, tomorrow, or XX days until it reaches tomorrow. Obviously, if you're putting a real countdown where the time is constantly changing or it's giving an actual amount of days or minutes until showtime, it gets a bit more complex.

I know this is an old thread but just wanted to add in another solution just in case someone else is running into this issue and none of the above solutions work out. For me, it was the "<use>" tag. Removing it got rid of the error. (I ended up recreating the SVG so it doesn't need that tag).

I know this is an old thread but just wanted to add in another solution just in case someone else is running into this issue and none of the above solutions work out. For me, it was the "<use>" tag. Removing it got rid of the error. (I ended up recreating the SVG so it doesn't need that tag).

It's definitely a super heavy effect, I wouldn't use it on anything at this time (stuff like this makes me miss Flash ? I'm on an iMacPro and I can tell it runs chunky and that's even with small things. Not quite ready to use these types of animated effects just yet. Here's a quick snippet to test it out > function blurFromTo(_element, _start, _end, _duration, _ease, _delay) { _element._blur = {}; _element._blur.amount = _start; TweenMax.set(_element, { webkitFilter: "blur(" + _start + "px)", filter: "blur(" + _start + "px)" }); TweenMax.to(_element._blur, _duration, { amount:_end, onUpdate: function() { TweenMax.set(_element, { webkitFilter: "blur(" + _element._blur.amount + "px)", filter: "blur(" + _element._blur.amount + "px)" }); }, ease:_ease, delay:_delay }); } Google has a solution (and I do something similar in Animate CC), where they take a few blurred instances at different blur levels and fade them into each other over time. You can probably easily modify this to use GSAP as well. Still not a great solution but probably best case as of right now. https://developers.google.com/web/updates/2017/10/animated-blur https://github.com/GoogleChromeLabs/ui-element-samples/tree/gh-pages/animated-blur

I've had issues where you apply an SVG blur filter and try to tween the filter values as well as an issue if you were to then slide the element across the screen (this was a while back or so). From what I remember, some browsers were creating a "trailing" effect, leaving behind the remnants of that trail in the path that it took that stayed there after the tween too (Some browsers did it, other didn't). Think of it looking similar to onion-skinning. I was attempting to create motion blur effects at the time. It worked but had that garbage on some browsers (and didn't perform so great on some devices). Not sure if the same issue appears if you don't try to tween the filter values, try to slide it, or if you keep it static. Might be fine if you create a duplicate version of the element with blur and just fading that in and out overtop of a static version without the blur – rather than trying to tween the blur filter itself.

Still PSD with everyone I work with, but definitely not ideal. If Photoshop improved its SVG export capabilities (or exporting altogether), then it'd be a step up. So, you can turn text and everything into SVG directly in Photoshop, and can export an SVG – you just can't copy a vector and paste the SVG code into a text editor like Illustrator can. I'm still using other apps to optimize assets, an extra step that PS should be able to do on its own. You can do the different canvas sizes with artboards in Photoshop, but exporting assets from each artboard is absolutely ridiculous when you want to try and crop something. Adobe XD looks interesting though. Looks like it would be a better option for designers that need to create PDFs of boards for client review.

You can also inline the SVG code. Create all your text in Illustrator (or the new Animate) in a separate file then you can copy and paste into the HTML. In Illustrator, when you copy/paste text to your text editor like Sublime, it'll paste SVG code, not an image or vectors. The advantage to doing this is you're not dealing with a bunch of extra individual SVG image files, plus you can access the SVG code if you want to do things (like SVG mask effects, blend effects, and even using GSAP to animate portions, just add id's or classes, sorta like an instance name). I'm personally not a fan of using PNG's for text content. 2X is still a tad soft on some newer ultra hi-res devices and doesn't render pixel-perfectly on all non-Retina displays and aliases a bit, plus dealing with spritesheets and their positions (when you need to update text) or having a slew of individual PNG files just doesn't seem efficient. I think with hand-coding, after a while you begin to create your own "template" of things you use often. I'm talking even simple things like a text div, a button, and image scale effect and so on. Then these become items that you can copy, paste, and then modify – rather than retyping over again. Or even create a snippet in whatever app you use. The same goes for your generic code for structure, css, clickthroughs, GSAP, etc. The area where hand-coding can be more efficient is when you get into more text-based banners or ads that are more templated (especially for programmatic) – and you do have the webfont or the image is the same size throughout. It's definitely much easier to just edit text and save a file. Or simply replace a rectangular background image by simply overwriting it (rather than opening a FLA, updating the library's bitmap, re-exporting, and saving again). Try doing that with 100+ variants in Animate and see if your hand doesn't freeze up from hitting command + enter a million times. That's not to say that hand-coding is better either, so don't throw away your knowledge or stop using Animate either. The two points you mention are some of the main advantages to Animate, so is less QA. When you get into more complex things, such as character animation or complex masking, it's not efficient to try and do that stuff with hand-coding (there's a reason why apps like After Effects exist). The main disadvantage with Animate is when you get into rich media, responsive ads, or large units (large canvas's will run slow as sh*!, or may not even run at all) – definitely something to factor in when you have a mixed campaign with various ad slots, both standard or rich media. Good to know both, and use whatever is best for that specific project –– but in both cases, use GSAP ?

@kellyimaging I haven't started using CC2019 just yet, I initially installed it but Illustrator kept crashing on Mojave, so that means I needed to stick to everything CC2018. I'll have to give it a go on the new version of Animate soon. I read they have a ton of new and exciting features. Yeah, I like Animate/Canvas for certain scenarios and hand-coding for others. Nope, I don't use the generated template, use my own custom one, took while to create and QA. Here are some of the things I include outside of the stuff you've already mentioned > - The proper CDN URL's for CreateJS and GSAP (Google and Sizmek have their own) - Misc CSS stuff (like adding a border or not and customizing the color/thickness, user select, focus, etc) - I embed AdHelper minified - I use Intersection Observer to detect whether the ad is in view, and then start the ad, pause it, have it go to the end frame, hide it, etc. I have the ad fade into view if it appears as you scroll up. - A loader for everything - What happens onBlur (when you change browser tabs or windows) - What happens when you click the ad (make the ad go to the end frame and stop all animation). - Add tracking for a timer, defaults to the 15-second time limit - Add button events (mouse over/out, touch, click, etc), which connect to manually coded events within Animate, if needed. - A way to adjust the Ticker's timing mode (handy depending on whether you're using timeline animation or using time-based animation GSAP within Animate). - Using AdHelper's performance checker. If I'm using timeline animation and it's running slow, I force all clips to play back at the proper speed to keep up with timing via timeSync. - Safari throttles RAF in cross-origin iframes, so I have code which adjusts accordingly. - Code for Retina/responsive. As for image assets, I just make them 2X and scale down in Animate. - Misc functions, like a UA Sniffer and a good ole' trace function. - And finally, a way to use ALL Blend Modes from within Animate. I know the dropdown only allows the Add blend mode, but you can actually use all of them (just not supported in IE, but you can create fallbacks).

Hey Celli, You should be able to control any properties listed here with GSAP or whatever > https://createjs.com/docs/easeljs/classes/MovieClip.html As for width and height in pixels, it’s done a bit differently using bounds (getBounds, setBounds, frameBounds, etc etc among other methods... just do a Google search). Just take a read through the props you’d like to adjust as they may be a bit different than you may think (ie: alpha is between 0-1, not 0-100).

Check out Dom3D, then use GSAP to animate!

Well, it's the ticker event specifically, which is updating what you see (yours is using setInterval, but can also use RAF or RAF Synced) ... which is inside the fnStartAnimation function...which is called AFTER the makeResponsive function (your hiDPI function) -- that code is at the bottom of that script tag. So it's an order of execution thing. However, you kinda wanna keep the ticker event within the start function and have that start after the hiDPI function, otherwise you'll see a quick hiccup when the hiDPI function takes effect.

Hi Celli, See fork below and where I added your code (in the HTML column of CodePen inside the fnStartAnimation function). It's just a copy and paste of your code but you can see around where you should add it. At that point, stuff is all loaded and everything animates just fine. You can make your own function for this particular purpose, just need to make sure the canvas is all set first.

You had it right if you're using the default HTML that it spits out. exportRoot.box was correct. However, you need to make sure the canvas is created, it's loaded, available in the timeline, and the right scope before calling it.

@Nolla283 I haven't tried that specifically but perhaps try x-axis rotation values (0 - 360) instead.

Difficult to tell what it could be without having an example posted or the authoring files on hand. Perhaps try uploading all the files to a server and then checking it. Worst case, you can always just pop an HTML video tag on top of the canvas tag that Animate generates and use that instead of the video component.

I do it with my banners in both GSAP and Animate CC versions (using my own template), use Intersection Observer. I make it play when in view, pause when out of view, and finally, go to the last frame when clicked or switching tabs. Yes, permitted on everything. I don't bother polyfilling it either, although there is one which adds an extra 7k.

Looks like it's snapping to a whole pixel at the end of the animation -- which was an issue with Chrome and how it rasterizes things. Did you try adding will-change: transform to the css?

Have anything to do with will-change perhaps? And then try without those small z movements? A video or CodePen would be helpful.

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.

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.

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).

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.

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).