Jump to content
GreenSock

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

Simple blur and fade in on text

Recommended Posts

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

 

 

 

Link to comment
Share on other sites

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?


 
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...
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?

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

Can this be incorporated with the new ScrollTrigger code?

How would that work?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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.

 

Screen Shot 2020-08-15 at 5.55.29 PM.png

Link to comment
Share on other sites

  • 1 year later...

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

 

  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...
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 by itsmattsoria
discovered the issue
  • 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.
×