dotmot Posted January 24 Share Posted January 24 (edited) Hi there, I'm having a weird issue when trying to use ScrambleText Plugin to tween a single character, split by the SplitText plugin and searching in the forums, i found the following thread: Split Text / ScrambleText - Random Stagger, which in a comment from @Carl has the following example that i used to create this animation ( I didn't comment there as the thread is from 2015). See the Pen JGoBvN?editors=001 by GreenSock (@GreenSock) on CodePen Now my problem is that while tweening the character, the tween has some "dead" time in between each character, i have tried fixing the timing using the duration of each tween, the duration of the timeline and the position of each tween in the timeline but it seems that i don't really understand how the ScrambleText Plugin really works. If anyone has any idea how i can configure this to run as if i was scrambling the text as a single word instead of each character as a regular ScrambleText Plugin tween would please, let me know. Thanks. See the Pen wvOrqOy by Dotmot (@Dotmot) on CodePen Edited January 25 by dotmot Error citing codepen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 25 Solution Share Posted January 25 That's because you were just sequencing each scramble tween one-after-the-other but for the effect that I think you want, you need to have them all animating at the same time, and have each one reveal one-after-the-other. So you can adjust the duration and the revealDelay accordingly. So for example, the first tween would be the shortest, the second one would be twice as long, and its revealDelay would be the duration of the first one. The 3rd one would be 3x as long as the first, one, and its revealDelay would be the duration of the 2nd one, etc. Here's what I assume you wanted: See the Pen gOEGoWw?editors=0010 by GreenSock (@GreenSock) on CodePen Thanks for being a Club GSAP member! 💚 2 1 Link to comment Share on other sites More sharing options...
dotmot Posted January 25 Author Share Posted January 25 12 hours ago, GreenSock said: That's because you were just sequencing each scramble tween one-after-the-other but for the effect that I think you want, you need to have them all animating at the same time, and have each one reveal one-after-the-other. So you can adjust the duration and the revealDelay accordingly. So for example, the first tween would be the shortest, the second one would be twice as long, and its revealDelay would be the duration of the first one. The 3rd one would be 3x as long as the first, one, and its revealDelay would be the duration of the 2nd one, etc. Here's what I assume you wanted: Thanks for being a Club GSAP member! 💚 This is exactly what i was intending to achieve and the explanation + the code gives me a really good example on how to use the plugin, thanks. I'm sorry for such a basic question, this is the first time trying this specific plugin. Link to comment Share on other sites More sharing options...
GreenSock Posted January 25 Share Posted January 25 4 hours ago, dotmot said: I'm sorry for such a basic question, this is the first time trying this specific plugin. No no, that wasn't a basic question at all. I think a lot of people might struggle with that. It's an edge case where you're splitting all the text apart and then trying to make it act like a single element with a scrambleText animation. 4 hours ago, dotmot said: This is exactly what i was intending to achieve and the explanation + the code gives me a really good example on how to use the plugin, thanks. 🥳 Have fun! 1 Link to comment Share on other sites More sharing options...
dotmot Posted January 26 Author Share Posted January 26 (edited) 😅 Hi again, the response did solve my issue but after playing some more with it i found something weird, i tried calculating the duration based on the length of both arrays. const katakana = [ ... ]; const split_text = new SplitText(".message"); const split_message = ["W", "e", "l", "c", "o", "m", "e"]; function decode(args) { const timeline = gsap.timeline(args); const chars = katakana.join(""); const charsPerSecond = 1 / 3; const totalDuration = katakana.length / charsPerSecond / 60; const charDuration = totalDuration / split_message.length; for (let index = 0; index < split_message.length; index++) { const el = split_text.chars[index]; const text = split_message[index]; const duration = charDuration * (index + 1); const revealDelay = charDuration * index; timeline.to( ... ); } return timeline; } This because in the example there is some "dead" time at the end and based on the code i assumed this is what would solve this as my assumption was that there where not enough characters in the `chars` string. So i thought that would give me an exact timeline, but i still have a small amount of "dead" space at the end that i can't get rid off. Here is a basic image demonstrating how I'm picturing the final timeline Now here is the same image but with what i think as "dead" space, the final letter "e" in welcome, it has about 0.26s of time. Here is a demo: See the Pen wvOrqOy?editors=0010 by Dotmot (@Dotmot) on CodePen 6 hours ago, GreenSock said: No no, that wasn't a basic question at all. I think a lot of people might struggle with that. It's an edge case where you're splitting all the text apart and then trying to make it act like a single element with a scrambleText animation. 🥳 Have fun! Edited January 26 by dotmot Missing codepen demo Link to comment Share on other sites More sharing options...
dotmot Posted January 26 Author Share Posted January 26 After reviewing a little more the timeline, i found that there is actually a difference of 0.26s in every character from where i `think` they should end based on the code, and where they actually end in the timeline and i don't understand why. Link to comment Share on other sites More sharing options...
GreenSock Posted January 26 Share Posted January 26 Yep, that's to be expected because you've got a linear ease ("none") and only ONE letter that you're "flipping", thus exactly halfway through the tweening part, it'd flip to the next (final) character. If you want it to wait longer to do that final flip, you could just use a much stronger ease, like ease: "expo.in". See the Pen yLwPevj?editors=0010 by GreenSock (@GreenSock) on CodePen Does that clear things up? Link to comment Share on other sites More sharing options...
dotmot Posted January 26 Author Share Posted January 26 It's so obvious i am a little embarrassed, this does cleared things up, at the end i configured a custom ease to achieve the effect i wanted. CustomEase.create("custom", "M0,0 C0,0 0.815,0.1 0.9,0.1 1,0.1 1,0.5 1,1 "); Again, Thank you very much. ScrambleTextPlugin Playground 1 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