Reply To: Unresponsive CSS typing text animation

[Beverleyh]

The 100% width and hidden overflow are key factors in getting the typing effect and I think you’ve already identified this requirement at the point where you separated the text off into multiple paragraphs. That’s not to say that it couldn’t be made to be responsive without some serious fudging, but I expect it will be a feat. To be honest I haven’t even looked that far, and I wouldn’t really want to either. You see, if you’re wanting to be a full stack developer (depending on who you speak to about what “full stack” entails), part of that package is likely going to include User Experience Design (UXD). Maybe not “full on”, but some basic considerations as a minimum. Aside from the hacky paragraph division, which is not ideal for search engine friendliness, you should try to consider the usability and experience that this typing effect will have on visitors. Realistically, it isnt comfortable waiting for the whole paragraph to reveal itself (quite tedious in my opinion – sorry). Will visitors sit it out until the end? Maybe some will, but I bet a large portion won’t. If you’re ok with that, then that’s fine – as long as you’re aware of the potential problems and knock-on effects on the impression that you leave with them. It’s your decision at the end of the day, but I personally don’t think this effect is suitable for that amount of text. I would say that it is better suited to a tag line in the header/footer – not important info. Leave it for a gimmicky flourish that isn’t going to impact so much upon a visitor’s absorption of information. Folks tend to skim-read in an “F” shaped pattern, and sadly, this affect doesn’t facilitate this behaviour. It hinders it.

If you are absolutely set on using this typing effect, on this much text, I would suggest letting JavaScript handle it instead. Here’s a small script that looks like it fits the bill. And it appears to be responsive (I’m on mobile so can’t thoroughly test though) http://www.cssscript.com/pure-javascript-typewriter-typing-effect-typewriter-js/

But I would still strongly suggest that you reconsider your current design choice for this paragraph.

Good luck with your portfolio and quest to full stack dev!