Jump to content
Search Community

Splittext different values for each character

gareth test
Moderator Tag

Recommended Posts

Hi,

 

Is it possible to have different random values for skews, rotations etc for each character in a split text tween? 

 

This is what I have so far:

 

 var split = new SplitText("h1", {type: "chars,words,lines", position: "relative"});
   var randSkew = gsap.utils.random(-2, 2, true);
   var randRotate = gsap.utils.random(-2, 2, true);
    gsap.from(split.chars, {transformOrigin:"center",duration: .112,rotation:randRotate, skewY:randSkew,skewX:randSkew,scale:1.016,ease:"bounce",yoyo:true,repeat:-1});

cheers! 

See the Pen LYNYYLV by garethj (@garethj) on CodePen

Link to comment
Share on other sites

wow! quick replies thanks!

 

So I guess I misunderstood how splittext works.  I was not seeing the randomness as the values just were not different enough. 

 

Is there an easy to way to pendulum the characters so like yoyo, but they reverse the other way with the same random values? 

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