Issue with TweenMax scaling my image while my css blur filter is animating

[hyconnect]

My image is scaling while I have a CSS filter animation running. I am running a filter blur on an image so that as the images scales, the images become blurred. There is a strange back-shadow inset appearing as the images scales and the image seems to shake.

 

I'd like to get rid of the box-shadow and the shake if possible. Any push in the right direction will be much appricated.  

 

Thanks!

 

 

[Carl]

Hi and welcome to the GreenSock forums,

 

Nice banner!

For supplying demos it really helps if you reduce it as much as possible so that we don't have to sift through all the code and figure out which elements are being tweened by what.

 

I did a quick test of scaling and blurring just with TweenMax.

 

http://codepen.io/GreenSock/pen/OXVOQm?editors=0010

Seems it's a bit of a struggle for chrome and there is some weird pixel snapping. Unfortunately that is out of our hands. 

 

I noticed you are building your sequence using a bunch of TweenMax tweens and delays. Have you tried our timeline tools? They will make animations like that so much easier to code and manage.

 

Check out:

http://www.greensock.com/timelinelite (watch the sequencing video)

and the video here: http://greensock.com/position-parameter

[ohem]

Chrome seems to handle SVG blurs more smoothly than CSS: 

See the Pen GJPjjQ by jonathan (@jonathan) on CodePen

 

And SVG filters work in IE unlike CSS filters, which is another plus.

 

 

 

hyconnect, I noticed you're animating your blur using CSS transitions (starting on line 124 of your CSS) which is another potential issue.  I think generally CSS animations shouldn't be mixed with GSAP because it can cause conflicts.

[hyconnect]

Thank you for replying so fast and for the helpful advice!

 

I was able to get a smoother transition when using SVG blur, the box- shadow issue is no longer a problem. There is still a pixel staggering effect going on when the image begins to blur. 

 

I tweaked the code from my previous pen to help others wth the issue I had. 

 

Codepen Link

 

See the Pen EyjpBY by team (@team) on CodePen

 

Here's the same Codepen, but I'm using Base 64/DATA URL.

 

See the Pen VjLGZm%C2%A0 by team (@team) on CodePen

[ohem]

Thank you for replying so fast and for the helpful advice!

 

I was able to get a smoother transition when using SVG blur, the box- shadow issue is no longer a problem. There is still a pixel staggering effect going on when the image begins to blur. 

 

I tweaked the code from my previous pen to help others wth the issue I had. 

 

Codepen Link

 

See the Pen EyjpBY by team (@team) on CodePen

 

Here's the same Codepen, but I'm using Base 64/DATA URL.

 

See the Pen VjLGZm%C2%A0 by team (@team) on CodePen

It's smoother with a faster/shorter tween and a more intense blur: 

See the Pen oLXPwZ by anon (@anon) on CodePen