Calculating Delays

[hutchiw1]

Hi,

I'm trying to get some scrolling text to not have a gap between the first and last string when it repeats. As you can see from the setup I have an inital string. Going forward I won't know what this is as it will come from an user input. I then calculate how many times to clone this depending on the length of the path. In order to make my life more difficult it has to be along an SVG path so I'm using startOffset as my animatable property. Each string has its starting point set depending on the length of the text plus a space.

I set a speed and thanks to Carl's tutorials on Creative Coding Club I can work out the duration needed so they all move at what appears to be the same rate. It is just this gap between the first element on repeat and backside of the last element that gets me. I'm not sure what I'm missing when it comes to calculating the delay.

 

I've been staring at this for a few days now and am probably overthinking it, can't see the wood for the trees etc. I'm hoping there is a new util I've overlooked, haha. Anyway, any ideas or hints would be much appreciated.

 

Will

 

See the Pen ZEXNBzX?editors=1011 by GullyFoyle (@GullyFoyle) on CodePen

[OSUblake]

Welcome to the forums @hutchiw1

 

As much as we'd like to help everyone with their animation problems, we just don't have the resources to help with logic issues (see the forum guidelines). My initial thoughts is that this is probably not a simple as it seems as you aren't dealing with linear movement. If you need additional help, you can post a request in our Jobs & Freelance forum.

 

[hutchiw1]

Hey @OSUblake, thanks for the reply. I thought as much, I knew I would be treading a fine line between GSAP and logic! I'll persevere and see what I can come up with. 

 

Thanks

 

Will

[hutchiw1]

@OSUblake, finally did it. It was a lot more logic, hahaha. 

[OSUblake]

Nice job!