gareth Posted August 4, 2020 Share Posted August 4, 2020 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 More sharing options...
PointC Posted August 4, 2020 Share Posted August 4, 2020 Like this? See the Pen 3e6a1384af3ce7087cfbbcdfdbc31268 by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 4, 2020 Share Posted August 4, 2020 Hey Gareth. Your code already has a different random value for each property. What do you want to be different? If you want more variance you could set repeatRefresh: true. See the Pen QWNWWYJ?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
gareth Posted August 4, 2020 Author Share Posted August 4, 2020 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 More sharing options...
PointC Posted August 4, 2020 Share Posted August 4, 2020 1 minute ago, gareth said: I was not seeing the randomness as the values just were not different enough. I thought that might be the case which is why I cranked up the values in my fork. Link to comment Share on other sites More sharing options...
gareth Posted August 4, 2020 Author Share Posted August 4, 2020 ha! yep 🤦♂️ trying to do a stop motion style effect.. just remembered there is the rough ease that might help for this. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 4, 2020 Share Posted August 4, 2020 Rough ease could work. As could CustomBounce. Or modifiers plugin. Or other ways There are a lot of ways. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now