Jump to content
GreenSock

momo12

splitText with GSAP for pararaph

Recommended Posts

Hello guys,

 

I have a question. Let's say we have a pragraph. How can I reveal each line using Stagger (I want to add delay to the bottom lines) and SplitText? The thing is I want the div block which contains each line, masks the initial state. So, the lines wouldn't be visible by default.

Link to comment
Share on other sites

This sounds a bit like one of my lessons. Perhaps this demo will help

 

See the Pen KKmVgpB?editors=1010 by snorkltv (@snorkltv) on CodePen

 

It's got a bit extra going on to make the text "unsplit" on resize and also re-init devtools. 

I'm doing a character-by-character animation on each line which is why I have to loop through each line.

 

If you need to learn more about how this is set up give the courses in my signature below a look

  • Like 3
Link to comment
Share on other sites

19 minutes ago, Carl said:

This sounds a bit like one of my lessons. Perhaps this demo will help

 

 

 

 

It's got a bit extra going on to make the text "unsplit" on resize and also re-init devtools. 

I'm doing a character-by-character animation on each line which is why I have to loop through each line.

 

If you need to learn more about how this is set up give the courses in my signature below a look

Thank a lot for your explaination! 

Link to comment
Share on other sites

Hi momo!

Here is an example if you want animate your lines when they are on screen... I have not tested, but I think it's good!

let gsplit;

$(window).on('load', function(){
  /*
  * Register GSAP Plugins
  */
  gsap.registerPlugin(ScrollTrigger, SplitText);


  /*
  * Init SplitText Gsap Plugin
  */
  gsplit = new SplitText('.splitText', {
    type: 'chars,words,lines',
    charsClass: 'char',
    linesClass: 'line',
    wordsClass: 'word'
  });

  // Prevent Bug, add opacity 0 to your CSS and turn it to opacity 1 when ready.
  $('.splitText').css({opacity: 1});


  /*
  * With ScrollTrigger, on Scroll, reveal each line of a pragraph when is coming in viewport
  */
  const paragraphs_lines = gsap.utils.toArray('.to-reveal .line');

  // Add translateY -10 and opacity 0 for the test to your CSS on elements ".to-reveal .line"
  paragraphs_lines.forEach((line, i, v) => {
    gsap.to(line, {
      y: 0,
      opacity: 1,
      stagger: .03,
      scrollTrigger: {
        trigger: line,
        start: 'top ' + (window.innerHeight - 100), // Bottom position - 100px
        end: 'bottom ' + (window.innerHeight - 100), // Bottom position - 100px
        scrub: true,
        markers: true
      }
    });
  });
});

 

You can turn scrub parameter to false or just not add it if you when a reveal based on the viewport only and not on scroll + viewport.

 

 

EDIT: Maybe you don't want anim your paragraph based on scroll/viewport position, but directly, with delay or not... Just remove scrollTrigger and add a delay or not.... I push a repair in my code too. Change splitText variable to gsplit.

 

Best Regards!
Sam

Edited by Sam Tremblay
Add example description
  • Like 2
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.
×