Jump to content
Search Community

Sync elements that are using SplitText

MZBS test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, I just bought the Business license to be able to use all the plugins (I am loving GreenSock so far) and I have a problem with Split Text.

 

I have 4 lines of text. 2 on the front and 2 on the back (two with stroke and another two without stroke in the same position) and an element in the middle to create a "fake mask" effect (circle).

 

I added the SplitText effect and is working fine.

 

My problem is that I need that the lines over the circle (stroke line) and the lines on the back (only some words with stroke) were sync at the same time (speed). 

 

 

I was thinking to put each line on a different timeline with a delay but I don't know how to make this work.

 

You can see the mask effect without the animation if you change amplitude to 0.

 

Thank you!

 

 

See the Pen pozVpYG by MZBS (@MZBS) on CodePen

  • Like 1
Link to comment
Share on other sites

11 hours ago, ZachSaucier said:

Hey MZBS. Welcome to the GreenSock family! We're glad you're with us.

 

I'm not fully understanding the effect that you're wanting to create. Is it something like this?

 

 

 

Hello Zack,

 

is like that but with the amplitude working on the characters, not on the words to create like an horizontal yoyo / accordion effect for each letter. So in your example all the words are moving at the same speed. What I want is the same effect I actually have here: 

, so you see that the "letter-spacing" is changing on the animation. 

 

I don't know if is more clear now.

 

Thanks!

MZ.

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Sorry, I am not understanding the effect that you're wanting.

 

Maybe this would help: What is wrong with the demo that you provided?

 

Ok so:

 

lets see this other example to understand the amplitude effect that I wanted to achieve on both lines:

See the Pen dybKyxB by MZBS (@MZBS) on CodePen

 

If you see in this example the characters are moving asynchronously left and right. 

 

My problem now is that with your example all the letters are moving the same way at the same time and with my example what is wrong is that the lines are not doing the same animation and what I need is that the letters have to move asynchronously but this asynchronous have to be the same on both lines to be able to match and see it like it would be the same line. 

 

So, my question is how can I get this: 

See the Pen dybKyxB by MZBS (@MZBS) on CodePen

 but with 2 text lines in the same absolute position (one would be with stroke and the other without in order to do the mask) doing this same animation. 

 

 

And to understand it even better. I have this 2 lines:

See the Pen xxKzbOe by MZBS (@MZBS) on CodePen

 

How can I put that line 2 (with stroke) does exactly the same animation as line 1. Now if you see are different with same timeline.  

 

Link to comment
Share on other sites

11 minutes ago, MZBS said:

this other example to understand the amplitude effect that I wanted to achieve on both lines:

That makes a lot more sense to me! I thought I had seen similar code before, now I know it's from that demo :) 

 

The main issue is that you are using one SplitText for all of the letters. You need to divide them up by section so that the effect works in the way that you're wanting it to (this will also allow you more control). 

 

var sections = ['.under-circle .line-item-top', '.over-circle .line-item-top', '.under-circle .line-item-bottom', '.over-circle .line-item-bottom'];
sections.forEach(function(section) {
  //splittext animation
}

The second issue is that you were applying two animations to a couple of the sections:

 

'.line-item-top', <-- Applies to 2 elements; needs to be made more specific
'.over-circle .line-item-top', <-- Applies to 1 element; also affected by the first selector!

Same thing for the line-item-bottom elements.

 

So I added an under-circle class to the container for the top section.

 

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

 

Hope that helps.

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

53 minutes ago, ZachSaucier said:

That makes a lot more sense to me! I thought I had seen similar code before, now I know it's from that demo :) 

 

The main issue is that you are using one SplitText for all of the letters. You need to divide them up by section so that the effect works in the way that you're wanting it to (this will also allow you more control). 

 


var sections = ['.under-circle .line-item-top', '.over-circle .line-item-top', '.under-circle .line-item-bottom', '.over-circle .line-item-bottom'];
sections.forEach(function(section) {
  //splittext animation
}

The second issue is that you were applying two animations to a couple of the sections:

 


'.line-item-top', <-- Applies to 2 elements; needs to be made more specific
'.over-circle .line-item-top', <-- Applies to 1 element; also affected by the first selector!

Same thing for the line-item-bottom elements.

 

So I added an under-circle class to the container for the top section.

 

 

 

 

Hope that helps.

 

Now is perfectly clear.

 

About the sections I was trying to do the same but not with sections but with 2 timelines but with sections is much better.

 

Thank you so much! 

 

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