TextPlug in Reveal Direction

[Greg Stager]

I am playing around with the textPlugin and was trying to get an effect where it looks like the text is coming out from a thin box.

The effect looks fine when animating "to the left" as the text is revealed starting at the beginning of the sentence.

However - the effect looks odd when animating "to the right" for the same reason.

I was trying to see if there was any way to reverse the direction and reveal starting from the end of the sentence but I did not see one in the docs.

So - is there some sort of direction parameter with this?

Hopefully the pen makes sense of what I am trying to do.

 

See the Pen abdGXyv by Arelwynn (@Arelwynn) on CodePen.

[PointC]

I'm not seeing the text plugin used in your demo. If you're just looking for the text to appear from the middle line, I'd think a div with overflow set to hidden would probably do the trick. Unless I'm missing something?

 

[ZachSaucier]

Hey Greg. I'd use a vastly different approach that's more flexible and reusable:

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

 

Take a look and let me know if you have any particular questions  

[Greg Stager]

18 minutes ago, PointC said:

I'm not seeing the text plugin used in your demo. If you're just looking for the text to appear from the middle line, I'd think a div with overflow set to hidden would probably do the trick. Unless I'm missing something?

 

 

LOL - Hmm... maybe I am not using it. I wasn't changing the text so I wasn't following the example in docs the same way.

I guess I wasn't sure what to expect when using it. I saw  some SplitText demos but not as much on this so I thought I was just tweaking to make it look OK and wasn't at all.

That's funny.

[Greg Stager]

On 7/9/2020 at 12:50 PM, ZachSaucier said:

and let me know if you have any particular questions  

Thanks, Zach - I admit to not being 100% sure how it works but I am also not sure where to focus my question so I will at least keep toying with it to try to better understand it.