Jump to content
Search Community

Animating a SplitTexted poem with minimal pauses now and then. How to do?

violacase test
Moderator Tag

Go to solution Solved by violacase,

Recommended Posts

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

 

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

 

  • Like 2
Link to comment
Share on other sites

Hi @akapowl,

It works fine :-) Thanks for the time you spent for the contribution! Much obliged.

 

Two things:

  1. Your pen is private. Could you make it public so we can fork and play with it?
  2. 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

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

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.

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 2
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...