Jump to content
Search Community

splitText carousel animation

Wizard of Oz test
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

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

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