Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tkshredder

Position Tweening when using a Drop Shadow Filter

Recommended Posts

Noticed a bug involving positional tweens for a DOM element with a dropShadow filter.

 

The reason for the CSS3 dropShadow filter is that I have a transparent PNGs I'd like to provide a shadow for, and GS's box-shadow only adds a shadow to the rectangular block shape of the element. Unfortunately, I've noticed that whenever the filter is applied to an element, I can not position the element via standard GS Tweens. (Ideally this would be as part of a TimelineLite, but the same bug applies to TweenLite / TweenMax calls). Here's a fiddle that shows the phenomenon.

 

By default, the element tweens just fine. However, toggle on the .shadowfilter class (which adds the webkit and FF versions of dropShadow), and the element no longer translates.

 

Any ideas for workarounds for this? Or is this a known bug?

I realize that as dropShadow is a filter, this is not going to be supported by GS for sometime, but can I at least still move a filtered element around?

 

http://jsfiddle.net/tkshredder/tYZ8E/9/

Link to comment
Share on other sites

Hi and welcome to the forums,

 

A workaround would be to create two separated images one of the truck and another of the shadow, give them an absolute positioning inside the div element (so they end up one on top of the other) and create a simple timeline for changing the shadow opacity, like this:

var tlShadow = new TimelineLite({paused:true}),
    Shadow = $("img#truckShadow");

//Set the alpha of the shadow to 0
TweenMax.set(Shadow, {autoAlpha:0});
tlShadow.to(Shadow, .2, {autoAlpha:1});

$("#toggle").click(function () {
        // Toggle the filter class:
        $(entity).toggleClass("shadowfilter");
        // Update the toggle button text:
        if ($(entity).hasClass("shadowfilter")) {
            $("#toggle").html("toggle filter OFF");
            tlShadow.play();
        } else {
            $("#toggle").html("toggle filter ON");
            tlShadow.reverse();
        }
});

You can see it working here:

http://jsfiddle.net/tYZ8E/10/

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

That's definitely a browser bug - apparently the current version of Webkit won't render any changes to the "left" property if the element has a filter applied. So GSAP is doing its job perfectly, updating the values but Webkit simply isn't rendering them in the browser. You can see this behavior without GSAP too - just apply a filter and then try manually changing the element.style.left. You'll see that it doesn't work.

 

This is part of the danger of using css features that are considered "experimental" in browsers (although I really wish they'd standardize these filters quickly, as they'd be really nice to have). 

 

The only workaround I'm aware of (aside from doing something like Rodrigo suggested) is to use GSAP's "x" instead of "left" and "y" instead of "top" so that it uses the "transform" css property to do the positional changes. 

  • Like 2
Link to comment
Share on other sites

Excellent! Thanks for the feedback Rodrigo & Jack. 

 

 

Rodrigo - Thanks for the warm welcome :D I was thinking down those lines as a backup but obviously trying to avoid generating extra images, if possible. 

 

Jack - your solution to use animate on "x" instead of "left" worked like a charm! Webkit filter still applies but the object can now be positional tweened! 

 

Haven't been able to get this working in Firefox yet (I realize my URL was off in my fiddle) but will give it a shot later.

 

 

 

 

  • Like 1
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.
×