Jump to content
Search Community

Getting a blur effect in Animate CC

Sinewave test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I couldn't find anywhere this is mentioned explicitly in the context of Adobe Animate CC. 

 

I'm trying to get a blur X on the X-axis while I tween a simple vector object across the stage. 

 

This works fine

var tl = new TimelineMax()
tl.from(this.arrow, .65, {x:-300, ease:Cubic.easeOut}, 2);

 

But if I add a blur with the  properties panel or try to use Pixi plugin (yes I have the include plugged in) the banner stops working.

var tl = new TimelineMax()
tl.from(this.arrow, .65, {x:-300, pixi:{blur:20}, ease:Cubic.easeOut}, 2);

 

 

300x250-prototype-17-RIAC-0597-120717.fla

Link to comment
Share on other sites

Yeah, sorry to hear about the Adobe issues. Thanks for reporting your findings, though. 

 

I think once you dig into hand-coding stuff, you'll love it and never want to go back. Well, there are some times when it's very useful to build things visually, but most of the developers I've talked to say that once they get familiar with coding stuff, it was very freeing and they tend to build [almost] everything that way now. 

 

Happy tweening!

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

To use PixiJS with Animate CC, you would need to use the Pixi Animate runtime. It's written by one the main PixiJS devs.

https://exchange.adobe.com/addons/products/14345#.Wi8GHiNX2Ul

https://github.com/jiborobot/pixi-animate

 

On 12/9/2017 at 7:48 AM, davi said:

it'd be cool to see some sort of library / plugin to make doing this specific task with canvas easy (cough cough).

 

The problem with blurring on a regular canvas is that it's slow. Blurring with PixiJS is fast because it uses WebGL. However, in the future you will be able to use CSS and SVG filters directly inside a canvas context, which should run pretty fast. At the moment, it seems support is limited to Chrome and Firefox.

 

You can see a CSS blur filter at work here. Turn off the contrast filter in the settings panel to isolate it.

 

See the Pen RLOzxo by osublake (@osublake) on CodePen

 

 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...