Jump to content
GreenSock

Umberto

Create variations for SpintText

Go to solution Solved by PointC,

Recommended Posts

Hi, I wanted to create some variations with the SplintText animation.
In the example below, I tried to animate only the lines and not the characters or words, but I couldn't.

 

Thanks

See the Pen LYzmVoN by umberto (@umberto) on CodePen

Link to comment
Share on other sites

Hey there!

Looks like you got it working. Let us know if you have any more questions ☺️

Link to comment
Share on other sites

Thanks for the reply.
With a single line it works, but over multiple lines of text, overflow: hidden for each line doesn't work. I have created a new example.

Sorry for my English

 

See the Pen ExwLPrp by umberto (@umberto) on CodePen

Link to comment
Share on other sites

I think I solved (I modified the pen above): I changed this line:

Quote

.... quote.anim = gsap.from (quote.split.chars, ........


with

Quote

.... quote.anim = gsap.from (quote.split.words, ........

I reversed the animation from chars to words and it seems to work.

 

What I wanted to ask and if the code is efficient with the changes made

 

Thanks

Link to comment
Share on other sites

That'll animate words not lines - but yep that's fine.

Link to comment
Share on other sites

Of course, I also wanted to create variations with words and chars.
The only thing, you can see in the first pen, the line does not create the same effect as with the chars and words. when the lamination starts, there is no overflow between the lines.
Why this?
Thank you

Link to comment
Share on other sites

Because the words are hidden by the overflow:hidden on .split-line

 

When you animate the line you're animating.split-line itself.

Link to comment
Share on other sites

I'm looking for a solution, but I can't

Link to comment
Share on other sites

42 minutes ago, Umberto said:

I'm looking for a solution, but I can't

 

Sorry, what's the issue?

 

Link to comment
Share on other sites

The problem is that I can't animate the Lines because there is this problem:

 

2 hours ago, Cassie said:

Because the words are hidden by the overflow:hidden on .split-line

 

When you animate the line you're animating.split-line itself.

 

I would like such a thing

 

See the Pen eYWLawR by marctaule (@marctaule) on CodePen

 

Thanks

Link to comment
Share on other sites

Sorry, I still don't understand what you're trying to do. I see the lines animating just fine. 🤷‍♂️

 

The only thing that looks incorrect is that ease and y should probably not be in the stagger.

 

gsap.to(split_parent.lines, {
  y: 0,
  ease: 'power1.in',
  stagger: {
    each: 0.1,
    // ease: 'power1.in',
    // y: 0,
  },
  onComplete: function(){
    if (revert === true) {
      split.revert();
      split_parent.revert();
    }
  }
});

 

ease in a stagger is used for distribution, but I don't know if that's what you want.

 

GreenSock | Docs | Staggers

 

Link to comment
Share on other sites

I apologize but maybe I am a little confused.
I try to be more precise.

The following pen I animated the words, now I would like to animate only the line, without animating the words and chars. I'm trying but I can't.

 

See the Pen ExwLPrp by umberto (@umberto) on CodePen

 

I hope I was clear.

Thanks for your patience

Link to comment
Share on other sites

This is what I wanted, PERFECT! 👌
I have a couple of questions to understand better:

 

- For more efficiency, in the ".quote" class should I add "display: inline-block"?

- The "split-line-inner" class should I add something in my css file or does it remain empty?

 

Thanks for your time

Link to comment
Share on other sites

1 hour ago, Umberto said:

For more efficiency, in the ".quote" class should I add "display: inline-block"?

The plugin adds display:block so I think you're fine without adding additional styles.

 

1 hour ago, Umberto said:

The "split-line-inner" class should I add something in my css file or does it remain empty?

You don't really even need to add a class to the first split. I just added an inner/outer class so it's obvious what's happening. You can comment out line 13 and see that it still works correctly. The split-line-outer (or whatever you want to call it) has the overflow set to hidden so the inner line can animate in from nowhere. 

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

PS Just to be clear - the outer class isn't really necessary either. You could skip all line classes and accomplish the same thing with:

.quote > div {
  overflow: hidden;
}

The secret is splitting it twice so you have a parent div for the target line.

:)

 

  • Like 2
Link to comment
Share on other sites

Now everything is easier.
Thanks for your suggestions

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