Jump to content
GreenSock

Alex J.

Split Text (Lines) on DIV with Paragraphs and Plain Text

Go to solution Solved by PointC,

Recommended Posts

Hello! 

 

I am trying the all time popular Line Reveal Animation. Wherein, I have used splittext to split the text into lines. 

 

But the problem:

 

I am targeting the whole DIV element in splittext. In this div, I have a combination of HTML elements like Paragraphs, Span, and Plain Text

The animation does not work since splittext is not performing line split (when targeting DIV) and not splitting the plain text (when targeting DIV p). Do we have any workaround to fix this problem?

 

Note: I don't want the paragraph to reveal like a paragraph but more like each line in a paragraph is a seperate line.

 

I am sorry if I am terrible at explaining.

 

Please check the attached codepen :)

 

Thank You 

See the Pen bGRjavE by alexjain (@alexjain) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forum. :)

 

Probably easiest to just wrap that first text in a <span>. Here's a fork of your pen with that option and I've also updated everything to GSAP3 syntax.

 

See the Pen 39240edef3cb0cc070c789e9074aba45 by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Thank you so much for your solution. Works perfectly fine. Though I have a new question if you don't mind me asking. I am trying to use ScrollMagic Library to trigger the animation on scroll. (the same line animation). 

 

But for some reason, My code is not behaving the way I'd like it to be. By any chance, is it possible for you to take a look at my code and see what's wrong? 

 

I really appreciate your valuable time :)

 

See the Pen bGRjavE by alexjain (@alexjain) on CodePen

Edited by Alex J.
Link added for codepen
Link to comment
Share on other sites

I'm not sure exactly what effect you're going for, but I would definitely recommend using ScrollTrigger instead of ScrollMagic. We don't support ScrollMagic here (it's not a GreenSock product). ScrollTrigger can do everything ScrollMagic does, plus a LOT more. And it's integrated nicely with GSAP. 

 

Is this what you wanted?:

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

This is exactly what I was looking for! 
Thank You @GreenSock

 

I have one last question, I am having a hard time figuring out what kind of easing this site is using for text reveal (from bottom) animation. It seems very subtle and soft. 

 

https://videinfra.com/

Edited by Alex J.
Added website link
Link to comment
Share on other sites

expo would be a little softer than the power4 you're currently using, but I think increasing the duration a bit would soften the landing as well. Check out the Ease Visualizer.

If you want total control, check out CustomEase.

Happy tweening.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

On 9/26/2021 at 3:15 AM, GreenSock said:

I'm not sure exactly what effect you're going for, but I would definitely recommend using ScrollTrigger instead of ScrollMagic. We don't support ScrollMagic here (it's not a GreenSock product). ScrollTrigger can do everything ScrollMagic does, plus a LOT more. And it's integrated nicely with GSAP. 

 

Is this what you wanted?:

 

 

 

Can I ask one more question please? I would really appreciate it! 

 

Right now, once the 'lines' get into viewport, all of those starts animating (I am using top 100%) or even with 60%. What If I want it to complete animating the first line then move on to the second one (in Viewport, not on full body of page). By any chance do we happen to have something to achieve this?

 

Thank You :) 

Link to comment
Share on other sites

I'm not understanding the question. Jack's demo above creates a ScrollTrigger for each line so each one will animate when it hits the trigger. You can set the markers to true and see what's happening.

 

See the Pen 0f519250150425793d65bf8940e1fb94 by PointC (@PointC) on CodePen

 

Maybe I'm missing something. 🤷‍♂️

 

  • Like 3
Link to comment
Share on other sites

Thanks for your reply @PointC,

 

Sorry for making it confusing, think of a scenario (i.e. in most cases true) where a user is scrolling say 20VH at a time. 

Since a lot of 'start' markers will activate and start animating at the same time, is it possible to have them animated in sequence?

 

In other words, Is it possible to trigger Elements in SEQUENCE based on elements in the current Viewport of the browser?

 

image.thumb.png.0f9108b3cd9a87f0519f3f62567cdaaf.png

 

Thank You 

Link to comment
Share on other sites

  • 1 month later...
On 10/1/2021 at 11:15 AM, GreenSock said:

I think you might be looking for the batch() feature: 

 

 

Thanks @GreenSock Loved playing around with Batch, But I have an issue. When I have a long page with a lot of items and batch, there is a lot of delay when the user scrolls down by a lot say 5vh. Since it animates all the above animation in sequence which contributes to not so great UX. 

 

I always tend to use forEach loop since it allows me to do mask animations on images too, like the one here:

See the Pen YzxZegg by alexjain (@alexjain) on CodePen

 

But the stagger does not work with forEach loop.

I was wondering if there is some magical way to use the stagger in foreach loop. (I'd prefer something which allows me to use specific seconds instead of waiting for the first element's animation to get completed and then have the delay). 

 

Thank You ) 

Link to comment
Share on other sites

10 hours ago, Alex J. said:

I was wondering if there is some magical way to use the stagger in foreach loop.

I'm not entirely sure I understand what you're asking, but can't you just use a delay that's based on the iteration? 

array.forEach((el, i) => {
  gsap.to(..., { delay: i * 0.5 });
});

As for the delayed stagger when scrolling very quickly, you could consider adjusting the timeScale() or duration based on the ScrollTrigger's velocity which you can get with .getVelocity(). Just a thought. 

  • 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.
×