Jump to content


  • Posts

  • Joined

  • Last visited


100 Specialist

About davi

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

3,543 profile views
  1. 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).
  2. 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).
  3. 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
  4. 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.
  5. 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.
  6. 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 ?
  7. @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).
  8. 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).
  9. Check out Dom3D, then use GSAP to animate!
  10. 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.
  11. 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.
  12. 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.
  13. @Nolla283 I haven't tried that specifically but perhaps try x-axis rotation values (0 - 360) instead.
  14. 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.
  15. 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.