mk1

Make placeholder text roll out with splittext

Recommended Posts

Maybe some of you are familiar with my post regarding the typeWriter effect which I successfully fixed to not be buggy anymore thanks to your tips.

 

Today I am trying to do simillar effect on a placeholder, working one way only.

 

1. On first load we have input with some placeholder content inside

2. We click on the input and the placeholder content delete itself with typewriter effect

 

I know there is plenty jquery plugin on this, but I want to stick GSAP in such cases wherever I can , and unfortunately I wasn;t able to find such example on codepen or our forum that actually use GSAP.

 

My codepen is empty for now as I just started to work on that case. As always if you are familiar with any codepen samples that I might find usefull I will be the most grateful for them.

 

Cheers!

 

Nick

Share this post


Link to post
Share on other sites

After more digging I think I will go with fixed label, it look like it will take much less time to accomplish

Share this post


Link to post
Share on other sites

Okay, I got it working quite well, however I am not able to switch the direction of text disappearing, how can I do that?

Share this post


Link to post
Share on other sites

If you reverse the array the characters will disappear from right to left. Try this:

tlTypeIt.staggerTo(chars.reverse(), 0.01, {opacity:0}, 0.02);
  • Like 2

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.