splitText carousel animation

[Wizard of Oz]

Hi,

 

I am trying to create a text based carousel with splitText transitions between the slides. Here are my questions:

1. How come I still get the console messages even after using "gsap.config({trialWarn: false})"?

2. How can I get the "number " in 1/3, 2/3 etc to also animate properly during slide transitions?

3. Is there something in this code that's screams amateur? e.g. redundant code. Any way I could have written this better?

 

Thanks as always for your wonderful insight and support 

 

Design & interaction inspired by: https://www.loudsnt.com/

 

 

See the Pen BaJoXgx by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen.

[mikel]

Hey @Wizard of Oz

 

This would be my logic to design a continuous slider.
Expandable with split text.

If you are interested in array methods, more e.g. here.

 

See the Pen qBpZObp by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[OSUblake]

Nice, @mikel

 

You could simplify that using the wrap utility function.

 

See the Pen BaJKKmP by GreenSock (@GreenSock) on CodePen.

 

4 hours ago, Wizard of Oz said:

1. How come I still get the console messages even after using "gsap.config({trialWarn: false})"?

 

Normally, you can just make sure the plugins are loaded first like this.

<script src="https://assets.codepen.io/16327/SplitText3.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

 

But it looks like sometimes it throws an error, but only with SplitText it seems. So it would have to be like this.

 

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script>gsap.config({trialWarn: false})</script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script>

 

[mikel]

 

Wraps have been more on my menu so far.

 

Thank you Blake.

 

P.S. Change UP and DOWN.

[Wizard of Oz]

Thank you so much @mikel & @OSUblake It's as if I sat on santa's lap and he gave me this forum. What a gift! Can't wait to play more with GSAP.