Umberto Posted January 3, 2022 Share Posted January 3, 2022 Hi, I wanted to create some variations with the SplintText animation. In the example below, I tried to animate only the lines and not the characters or words, but I couldn't. Thanks See the Pen LYzmVoN by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 3, 2022 Share Posted January 3, 2022 Hey there! Looks like you got it working. Let us know if you have any more questions ☺️ Link to comment Share on other sites More sharing options...
Umberto Posted January 3, 2022 Author Share Posted January 3, 2022 Thanks for the reply. With a single line it works, but over multiple lines of text, overflow: hidden for each line doesn't work. I have created a new example. Sorry for my English See the Pen ExwLPrp by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
Umberto Posted January 3, 2022 Author Share Posted January 3, 2022 I think I solved (I modified the pen above): I changed this line: Quote .... quote.anim = gsap.from (quote.split.chars, ........ with Quote .... quote.anim = gsap.from (quote.split.words, ........ I reversed the animation from chars to words and it seems to work. What I wanted to ask and if the code is efficient with the changes made Thanks Link to comment Share on other sites More sharing options...
Cassie Posted January 3, 2022 Share Posted January 3, 2022 That'll animate words not lines - but yep that's fine. Link to comment Share on other sites More sharing options...
Umberto Posted January 3, 2022 Author Share Posted January 3, 2022 Of course, I also wanted to create variations with words and chars. The only thing, you can see in the first pen, the line does not create the same effect as with the chars and words. when the lamination starts, there is no overflow between the lines. Why this? Thank you Link to comment Share on other sites More sharing options...
Cassie Posted January 3, 2022 Share Posted January 3, 2022 Because the words are hidden by the overflow:hidden on .split-line When you animate the line you're animating.split-line itself. Link to comment Share on other sites More sharing options...
Umberto Posted January 3, 2022 Author Share Posted January 3, 2022 I'm looking for a solution, but I can't Link to comment Share on other sites More sharing options...
OSUblake Posted January 3, 2022 Share Posted January 3, 2022 42 minutes ago, Umberto said: I'm looking for a solution, but I can't Sorry, what's the issue? Link to comment Share on other sites More sharing options...
Umberto Posted January 3, 2022 Author Share Posted January 3, 2022 The problem is that I can't animate the Lines because there is this problem: 2 hours ago, Cassie said: Because the words are hidden by the overflow:hidden on .split-line When you animate the line you're animating.split-line itself. I would like such a thing See the Pen eYWLawR by marctaule (@marctaule) on CodePen Thanks Link to comment Share on other sites More sharing options...
OSUblake Posted January 3, 2022 Share Posted January 3, 2022 Sorry, I still don't understand what you're trying to do. I see the lines animating just fine. 🤷♂️ The only thing that looks incorrect is that ease and y should probably not be in the stagger. gsap.to(split_parent.lines, { y: 0, ease: 'power1.in', stagger: { each: 0.1, // ease: 'power1.in', // y: 0, }, onComplete: function(){ if (revert === true) { split.revert(); split_parent.revert(); } } }); ease in a stagger is used for distribution, but I don't know if that's what you want. GreenSock | Docs | Staggers Link to comment Share on other sites More sharing options...
Umberto Posted January 3, 2022 Author Share Posted January 3, 2022 I apologize but maybe I am a little confused. I try to be more precise. The following pen I animated the words, now I would like to animate only the line, without animating the words and chars. I'm trying but I can't. See the Pen ExwLPrp by umberto (@umberto) on CodePen I hope I was clear. Thanks for your patience Link to comment Share on other sites More sharing options...
Solution PointC Posted January 3, 2022 Solution Share Posted January 3, 2022 Is this what you need? See the Pen 3e7b209828c6176a8266a51188759206 by PointC (@PointC) on CodePen 3 Link to comment Share on other sites More sharing options...
Umberto Posted January 4, 2022 Author Share Posted January 4, 2022 This is what I wanted, PERFECT! 👌 I have a couple of questions to understand better: - For more efficiency, in the ".quote" class should I add "display: inline-block"? - The "split-line-inner" class should I add something in my css file or does it remain empty? Thanks for your time Link to comment Share on other sites More sharing options...
PointC Posted January 4, 2022 Share Posted January 4, 2022 1 hour ago, Umberto said: For more efficiency, in the ".quote" class should I add "display: inline-block"? The plugin adds display:block so I think you're fine without adding additional styles. 1 hour ago, Umberto said: The "split-line-inner" class should I add something in my css file or does it remain empty? You don't really even need to add a class to the first split. I just added an inner/outer class so it's obvious what's happening. You can comment out line 13 and see that it still works correctly. The split-line-outer (or whatever you want to call it) has the overflow set to hidden so the inner line can animate in from nowhere. Happy tweening. 1 Link to comment Share on other sites More sharing options...
PointC Posted January 4, 2022 Share Posted January 4, 2022 PS Just to be clear - the outer class isn't really necessary either. You could skip all line classes and accomplish the same thing with: .quote > div { overflow: hidden; } The secret is splitting it twice so you have a parent div for the target line. 2 Link to comment Share on other sites More sharing options...
Umberto Posted January 4, 2022 Author Share Posted January 4, 2022 Now everything is easier. Thanks for your suggestions 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