Unresponsive CSS typing text animation

[Freddie]

Hello guys, I’m working on my personal portfolio page and in it I tried to create a ‘typing text’ animation. I managed to get it to work but the animation is not responsive. Once I get below a certain screen size some of my text is cut off. Check my code out here and please help! http://codepen.io/freddiefo/pen/vKRXZQ

[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!

[Freddie]

Thank you very much for this response Beverleyh! I literally just started learning to code and I started doing this portfolio page as part of Free Code Camp’s challenges.

Your point about the UX of the animation is right, the reason I was trying to figure it out is simply because I wanted to experiment and see if I could make it work. I find web animations very fascinating and was using this as a way to understand how CSS animations, keyframes, overflow, etc work.

I will definitely reconsider this design choice and remove the unnecessary typing effect!

[Author]

Posts