Jump to content
GreenSock

multivac

Text effect with stagger and css filter ?

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

Hi GSAP team,

 

I'm trying to animate text with a blur filter.

 

See the Pen jYRYwv by multivac (@multivac) on CodePen

 

After a quick search, I understand that my approach may not be correct. It seems that an "onUpdate" callback should be used to animate a css filter with GSAP. Just like here:

 

See the Pen omsrL by joemidi (@joemidi) on CodePen

 

Is it possible to animate a filter without a callback ? If no, what is the best way to integrate this in a stagger ?

 

Thank you !!!

 

Link to comment
Share on other sites

It is not mandatory to use the callback.

 

If I remember correctly, the reason why Joe did that was because, at the time, there was an issue with how the filter was being rendered and something was bugered up.

 

It's fine to use just the CSS plugin. Just make sure you test on the browsers your target audience uses the most.

  • Like 1
Link to comment
Share on other sites

Thank you for the reply Dipscom.

 

In the first codepen I use the TweenMax library. Isn't CSSPlugin already inlcuded in TweenMax ?

If that the case, my filter tweening still doesn't happen. I'm clueless.

Link to comment
Share on other sites

10 minutes ago, multivac said:

In the first codepen I use the TweenMax library. Isn't CSSPlugin already inlcuded in TweenMax ?

 

That is correct.

 

10 minutes ago, multivac said:

If that the case, my filter tweening still doesn't happen. I'm clueless.

 

That could be the issue Joe was remediating with his onUpdate technique.

 

Sorry, only now it clicked what you are reporting. I can see that the blur itself is not tweening but simply toggling off at the end of it. I don't know what's going on from the top of my head. @Jonathan is really knowlegeable regarding browser quirks, maybe he'll stop by with some info.

 

Otherwise, someone else might know. Last-ditch hope is that I will sit down at some point and look into the matter (don't expect a miracle cure, though).

  • Like 2
Link to comment
Share on other sites

Hello @multivac and welcome to the GreenSock forum!

 

To get a full cross browser blur effect you should animate using an SVG filter instead of a CSS filter. This is due to the limit of browser support for CSS filters. But it is getting better for CSS Filters support in each passing year. ;)

 

So i have 2 examples..

  1. animates SVG Filter Blur
  2. animates CSS Filter Blur

The below example uses the GSAP AttrPlugin to animate the stdDeviation attribute of the SVG <feGaussianBlur> element.

 

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

 

And here is an example of animating CSS Filter blur()

 

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

 

Happy Tweening! :)

  • Like 5
Link to comment
Share on other sites

@Jonathan

Thank you for taking the time ! The GSAP forum team is just amazing.

 

The ultimate goal is to explore if GSAP can eventually be used to create animations that combine the power of SplitText and filters.

 

The SVG solution looks great ( just learned about GSAP AttrPlugin :D ). My guess is that it cannot be applied when using SplitText.

 

Using CSS filters looks like the way to go. But making this work with a SplitText stagger seems like a daunting task. Does the mandatory use of "onUpdate", means that "stagger" cannot be used ?

 

 

GSAP, please consider adding something for a cleaner way to tween filters. When scanning through code, the solution feels long, complex, and less intuitive than classic Tweening. These 4 lines of codes are beautiful, but they won't work :(:wub::(

 

var h1 = document.querySelector( "h1" );
var split = new SplitText( h1, { type: "chars" } );
var tl = new TimelineMax();
tl.staggerFrom( split.chars, 0.7, { opacity: 0, filter: "blur(5px)" }, 0.1 );

 

Happy Tweening! :P

 

 

 

Link to comment
Share on other sites

Hello @multivac

 

Is this what you were after? .. i used a staggerFromTo() without using an onUpdate ;)

 

I think the issue was that the browser did not know what the starting filter value was, since by default CSS filter is none. That is why you saw a an abrupt step with no transition from blur to no blur. It was acting like an on / off switch with no interpolation of values.

 

I also added a slight rotation 0.01 and used autoAlpha instead of opacity to make it animate smoother. As well as adding some needed CSS properties to help with cross browser rendering bugs.

 

So now you should see it animate from blur to no blur:

 

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

 

JS:

 

var h1 = document.querySelector( "h1" );
var split = new SplitText( h1, { type: "chars" } );
var timeline = new TimelineMax();
// change visibility for initial load
TweenMax.set("h1", { visibility:"visible" });
// use satggerFromTo()
timeline.staggerFromTo( split.chars, 0.7, { 
    autoAlpha: 0, 
    webKitFilter: "blur(5px)",
    filter: "blur(5px)", 
    x: 80, 
    rotation: 0.01
},{ 
    autoAlpha: 1, 
    webKitFilter: "blur(0px)",
    filter: "blur(0px)", 
    x: 0, 
    rotation: 0.01
}, 0.1 );

 

CSS:

 

h1 {
    visibility:hidden;
}

h1 > div {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    visibility:hidden;
}

 

Happy Tweening! :)

 

  • Like 5
Link to comment
Share on other sites

 

This is sooo nice @Jonathan !

It just works perfectly.

Thank you for taking the time to help newbies, it's very much appreciated.

 


 

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