violacase Posted April 28, 2021 Share Posted April 28, 2021 I am trying to animate the text of a poem using SplitText. The poem has no punctuation. The preliminary result is quite nice. But now timeline timing is linear. I would like to take a short pause here and there, for example after the word 'heavens'. I have no idea how to make that happen. Anyone any idea? Maybe not work with SplitText? See the Pen abpxKyo by violacase (@violacase) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted April 28, 2021 Share Posted April 28, 2021 Hye @violacase You could for example wrap individual parts in your HTML markup, and target those specific parts/wrappers for individual splitTexts (and adjust the formatting of the selectors for the special words in CSS accordingly). Then you could add tweens on those seperate parts to your timeline and position the second tween via the position parameter, so it has a break inbetween the two parts. Could that be an option for you? See the Pen 637669d2af626ec709ad23b6969189d6 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
violacase Posted April 28, 2021 Author Share Posted April 28, 2021 Hi @akapowl, It works fine Thanks for the time you spent for the contribution! Much obliged. Two things: Your pen is private. Could you make it public so we can fork and play with it? Although it DOES the job fine for a simple task, on the longer run it is a cumbersome and browser expensive solution I think. I'm hoping that perhaps it is possible to emit a call back function after a certain 'word' has been processed. That would make life a lot easier! Perhaps with the modifier plugin? Link to comment Share on other sites More sharing options...
Solution violacase Posted May 4, 2021 Author Solution Share Posted May 4, 2021 See the Pen RwpbGeB by violacase (@violacase) on CodePen I found a perhaps dirty way to get a rather fine solution for this problem with just HTML/CSS. I'm not satisfied but it works. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 4, 2021 Share Posted May 4, 2021 Here's another option that lets you set exactly the amount of time you want to wait using data-wait attributes: See the Pen wvJwjdY?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 1 1 Link to comment Share on other sites More sharing options...
violacase Posted May 5, 2021 Author Share Posted May 5, 2021 Perfect Jack! Very nice solution. Thanks for your work.😘 Link to comment Share on other sites More sharing options...
Cassie Posted May 5, 2021 Share Posted May 5, 2021 This is a lovely solution. Nice and screenreader friendly too. 🙌 1 Link to comment Share on other sites More sharing options...
violacase Posted May 5, 2021 Author Share Posted May 5, 2021 49 minutes ago, Cassie said: This is a lovely solution. Nice and screenreader friendly too. 🙌 Explain this screenreader friendliness please. The whole animation thing is unfriendly in my opinion. Animation is a difficult thing. You can't always satisfy all the community. @Cassie: Are you willing to fork the above pen with accessibility extras so I can see what you mean? Link to comment Share on other sites More sharing options...
Cassie Posted May 5, 2021 Share Posted May 5, 2021 Animation isn't necessarily unfriendly to screenreaders. It's about making reasoned choices that are correct for that specific project. Whacking a load of unnecessary text in the DOM or changing structural markup is certainly more likely to have ramifications than some data attributes. I've encountered bugs with screenreaders reading unstyled markup and ignoring display none before. 2 Link to comment Share on other sites More sharing options...
violacase Posted May 5, 2021 Author Share Posted May 5, 2021 @Cassie Yes, I understand. Clear explanation. In this case 'a poem' might be rather important to have these aria things etc. well done. So íf you'd like to fork it you gonna make me a happy old man. 2 Link to comment Share on other sites More sharing options...
Cassie Posted May 5, 2021 Share Posted May 5, 2021 No need for aria roles if you're using correct markup. Which you are 😊 The only thing I'd change is opacity:0 instead of autoAlpha as opacity:0 doesn't hide anything from screenreaders. Then, good to go! Nice accessible animation. 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