Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
violacase

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

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 post
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 post
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 post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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?

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Perfect Jack! Very nice solution. Thanks for your work.😘

Link to post
Share on other sites

This is a lovely solution. Nice and screenreader friendly too. 🙌

  • Like 1
Link to post
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 post
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 post
Share on other sites

@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.

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

×