Sadly Google and other search engines don't consider data-attributes content, any text in those elements will not be considered. You should also opt a mixture of both
data within the parent to ensure that bots consider the first values.
Your options are limited but here's some suggestions:
Option 1. Don't use important keywords in the elements prior the change.
<h1 data-text="[Sex], [Pizza]">My Website Design is better than <span>Marmite</span></h1>
<h1 data-text="[I won't be beaten in price], [Nor will you find better results]">
My Website Designs taste better than Marmite
The keywords being Website Design and the later being not so important but good for UX. In other words, have the keywords that matter always visible or at least appear before the text changes.
Option 2. Inject the changes after page load.
The other option would be to use a page loader such as PACE but its important to note that Google will only consider the first values, this however does combat the issue of the "FLASH" effect.
Ideally... the best method would be not to use important keywords in those elements. You also also note that you should use
<i> unless there is a change in mood eg:
- We make designs that are
- We build
<span>UX driven websites</span>.
However in terms of SEO, both
<span> are correct and will have no baring no matter what you use.