Simple blur and fade in on text

[bannerguy 0 Likes (Newbie)]

I'm developing HTML canvas banners in Adobe Animate and using GSAP.

I have some dynamic text that I'm trying to blur and fade in from invisible to 100.

I'm trying to replicate the attached.

 

Can someone point me to some sample script I can grab for this?

Also, I have the GSAP Business plan, so I have access to all plugins.

 

Thanks in advance for any help with this!

-Gary

 

 

 

[Frederic Gontier 8 Likes (Newbie)]

Hello, not in Animate but vanilla javascript:

See the Pen wvKaXxW by fr3d3ric (@fr3d3ric) on CodePen

Cheers

 

 

[ZachSaucier 7,061 Likes (Superhero)]

You might be interested in the example plugin that does a blur that we made:

See the Pen NWKjEBG by GreenSock (@GreenSock) on CodePen

[bannerguy 0 Likes (Newbie)]

Exactly what I need. I can't seem to get it to work though.

 

Is there only one place where you swap out the instance movieclip name?

[ZachSaucier 7,061 Likes (Superhero)]

7 minutes ago, bannerguy said:

I can't seem to get it to work though. Is there only one place where you swap out the instance movieclip name?

It's intended to be used in JS, not in Animate. I'm not sure if you can include it in Animate (I've never used Animate with GSAP). If you're having trouble feel free to make a minimal CodePen and share it with us.

[loyca29 0 Likes (Newbie)]

On 4/13/2020 at 10:05 PM, ZachSaucier said:

You might be interested in the example plugin that does a blur that we made:

 

Hi I'm really interested with the Blur Effects plugin made by GS team, however as per checking it seems that this is not working on IE 11 browser.
Is there a workaround about this?

 

[ZachSaucier 7,061 Likes (Superhero)]

Hey loyca29 and welcome to the GreenSock forums! Thanks so much for supporting GreenSock with your Club membership.

 

17 minutes ago, loyca29 said:

I'm really interested with the Blur Effects plugin made by GS team, however as per checking it seems that this is not working on IE 11 browser.
Is there a workaround about this?

That blur plugin is just a demo of how to create a plugin. It makes use of CSS filters, so any browser that support CSS filters it should work in. 

 

Blurring doesn't have great support no matter what. You can get it supported in IE 10+ if you are just using SVG.

[bill young 0 Likes (Newbie)]

Can this be incorporated with the new ScrollTrigger code?

How would that work?

[ZachSaucier 7,061 Likes (Superhero)]

2 hours ago, bill young said:

Can this be incorporated with the new ScrollTrigger code?

How would that work?

Hey Bill and welcome to the GreenSock forums. You just need to add the ScrollTrigger property to a tween that uses blur  

See the Pen NWxQbNp?editors=0010 by GreenSock (@GreenSock) on CodePen

[bill young 0 Likes (Newbie)]

On 7/31/2020 at 7:39 PM, ZachSaucier said:

Hey Bill and welcome to the GreenSock forums. You just need to add the ScrollTrigger property to a tween that uses blur  

 

 

This is great. But I am having trouble getting other animations on the page to work with ScrollTrigger now.

If I "register" ScrollTrigger, it breaks the blur.

gsap.registerPlugin(ScrollTrigger);

No blur. ... but If I comment that out... the blur works... i can animate other elements, but it is not ScrollTrigging the animations... they are just play on load, so they are in their final state by the time i scroll to them.

I am stuck.

 

[ZachSaucier 7,061 Likes (Superhero)]

2 minutes ago, bill young said:

I am having trouble getting other animations on the page to work with ScrollTrigger now.

If I "register" ScrollTrigger, it breaks the blur.

gsap.registerPlugin(ScrollTrigger);

No blur. ... but If I comment that out... the blur works... i can animate other elements, but it is not ScrollTrigging the animations... they are just play on load, so they are in their final state by the time i scroll to them.

I am stuck.

I am guessing that there is something else going on because registering ScrollTrigger shouldn't cause issues like that.

 

Can you please create a minimal demo that recreates the error?

 

[bill young 0 Likes (Newbie)]

19 hours ago, ZachSaucier said:

I am guessing that there is something else going on because registering ScrollTrigger shouldn't cause issues like that.

 

Can you please create a minimal demo that recreates the error?

 

See the Pen eYZYOve by beyoung2 (@beyoung2) on CodePen

ScrollTrigger not triggering second headline... will need to do this multiple times on the page.

 

[ZachSaucier 7,061 Likes (Superhero)]

3 minutes ago, bill young said:

ScrollTrigger not triggering second headline... will need to do this multiple times on the page.

You're selecting all of the headers and applying one ScrollTrigger to all of them. Instead, you should loop through all of the headers and create a ScrollTrigger for each.

See the Pen poyozdw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

This is one of the most common mistakes people make with GSAP. I highly recommend reading about all of them.

 

[bill young 0 Likes (Newbie)]

I got this all working.
Unfortunately... it is SOOO slow and laggy in Safari and FireFox it is Not usable.

and it is creating this weird Box around the text. 
Having to strip it all out and use something else. 
Disappointed.

 

[Teru 1 Likes (Newbie)]

I know it's late, but I thought I'd write this down in case it helps anyone. It seems to work smoothly in Safari if you use CSS will-change.

See the Pen bGrmbev by teruteru (@teruteru) on CodePen

 

[itsmattsoria 1 Likes (Newbie)]

On 7/31/2020 at 12:39 PM, ZachSaucier said:

Hey Bill and welcome to the GreenSock forums. You just need to add the ScrollTrigger property to a tween that uses blur  

 

 

 

Zach — your example doesn't seem to be working for me anymore. I'm on mac OS Big Sur and viewing in Chrome/Brave/Safari/Firefox — all don't seem to be working anymore for adjusting the blur on scroll. The blur itself is working, but updating the blur value on scroll is not. No errors in the console at all, and this is what I'm seeing: https://share.mattsoria.com/Screen-Shot-2021-12-13-14-27-22.71/ — any thoughts on why attaching the blur to scrollTrigger stopped working?

 

**UPDATE:** — registering the `scrollTrigger` plugin seems to have fixed the issue in your demo at least

Edited December 13, 2021 by itsmattsoria
discovered the issue