Jump to content
Search Community

Create variations for SpintText

Umberto test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

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

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

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

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