SplitText best practice for timeline creation

[Sascha Fincher]

Hi,

 

This is more a general question and not a problem.

 

I am creating a slider animation which is also using SplitText and I could use some advice on how to optimize it.

 

During a slide change I run a couple of animations and one of those is a SplitText animation. What I am currently doing is:

• do the splitting up front for all the text in alle the slides when my slider initializes
• create in and out timelines and save them in an array
• play the respective timelines once a slide is selected

 

It's working perfectly fine. However I am asking myself if it would be better to calculate everything on the fly. So basically create the in- and out-timelines and the splitting on slide change. This would probably have the advantage of less memory usage and I would not have this totally cluttered DOM all the time. It would also allow me to do a revert() after the animation is finished. The only thing I am not sure about is the performance impact.

 

Maybe anyone has a  best practice advice on this?

[OSUblake]

Hi Sascha,

 

If possible, I would create everything ahead of time. Creating stuff an on the fly, especially splitting text is not going to improve performance. And I wouldn't worry about memory usage or how many DOM elements there are unless you notice a problem. Memory usage is most impacted by large graphical assets, not DOM elements or animation instances.

 

Don't waste time on trying optimize something that might not even have any impact. 😉

 

[Sascha Fincher]

Hi Blake,

 

perfect, thank you. I will leave it as it is then. It‘s working smoothly 👍🏻