Jump to content
GreenSock

Wizard of Oz

splitText carousel animation

Moderator Tag
Go to solution Solved by mikel,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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>

 

  • Like 4
Link to comment
Share on other sites

 

Wraps have been more on my menu so far.

 

Thank you Blake.

 

P.S. Change UP and DOWN.

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 3
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.
×