Split text delay issue

[Tompy]

Hello,

 

My friend and I @smallio have been making this for a contact page on a site we are building. We are having a problem to get each split text transition to happen at the same time when you click each button. The first button is working at the speed we want it to however the second and third buttons seem to have an incrementing delay to them. Any help would be massively appreciated!

 

Many thanks,

 

Sam

See the Pen YJwadN by t0mpy (@t0mpy) on CodePen

[Jonathan]

Hi @Tompy and Welcome to the GreenSock forum!

 

I tested your codepen in latest Firefox (62.0.3) and Chrome (69) on Windows 10. I could not see a delay in any of the 3 animations.

 

Are you seeing this on an Apple desktop or mobile device / computer?

 

What OS and OS version are you seeing this on?

What browser and browser version are you seeing this on?

 

Any additional info will help us help you figure why your seeing this delay.

 

Thanks

[Carl]

I see the delay. if you press the third button it takes an extra bit of time for the words to start appearing. its subtle.

 

The issue is that you have 1 timeline that animates all 3 sections. regardless of what button you press that timeline plays all the way through each time. Since the third item is last... you will need to wait for the first 2 to play each time you want to see the third item.

 

I ripped out a bunch of css so that you can see what happens each time you open a section and hit the close button.

1 timeline plays all the way through and reverses all the way through

 

in the demo below, click the bottom button, you'll see the entire timeline play and each word animate.

 

See the Pen NOxBPg?editors=0110 by GreenSock (@GreenSock) on CodePen

 

I think you need to step back and take a different approach for this. You probably want individual timelines for each section. 

Your close button needs to be configured to always reverse whatever the "currentSection" is that is being displayed.

 

Take a look at the demos in this thread: 

 

 

[Carl]

actually, maybe I'm wrong... it looks like you are creating 3 timelines, but somehow they each all animate all the words? 

Again, probably going to take some ripping apart. I'd suggest you start small and simple. don't worry about too many effects with a bunch of stuff sliding in and out.

[smallio]

@Carl @Jonathan

 

Thanks for the info guys. We actually managed to fix it by storing each split.chars in an array and looping through it with the index! A little trick @PointC showed me a few weeks ago. I'm now going to do the same with timelines & see how much I can learn.

 

Really appreciate the examples Carl, we'll be studying these.

 

Cheers!

 

 

 

See the Pen dgGrPx?editors=0010 by smallio (@smallio) on CodePen

 

[Carl]

Looks great! nice job.