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

 

 

 

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
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?


 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
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?

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Can this be incorporated with the new ScrollTrigger code?

How would that work?

Share this post


Link to post
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

Share this post


Link to post
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.

 

Share this post


Link to post
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?

 

Share this post


Link to post
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.

 

Share this post


Link to post
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

Share this post


Link to post
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.

×