css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Loved the text animation at Wokine.com so I tried to recreate it here. I noticed they used simple shapes to create the words. I did that using svg lines and circles, and animated the stroke-offset attribute of each one to give it this animation. Animated it using css keyframes and animations.

Comments

  1. Nice work. Looks great but look at all the CSS required to make this work...

  2. @geeves Thank you. You're right, there's probably a better way to animate this, but outside of my scope right now. If you have any ideas I'd love to hear them! :)

  3. @Ayachem I can't remember if all browsers are cool with one keyframe parameter, but things can definitely condense by reusing the same animation a few times over: forked Pen.

  4. @nickawalsh Hey Nick. That looks much better. I tried doing that too using "animation-delay" but all that did was delay the animation from rendering until part way through the sequence. What is the second "seconds" value you have on your animations here?

  5. @Ayachem The second seconds is the delay indeed; if you have a delay though, and want the from / 0% state of the keyframe to be there prior to the animation starting, you have to use both or backwards as the animation-fill-mode.

  6. Really, really nice.

  7. @Ayachem My apologies, it's less of a commentary about your techniques, but more of a commentary about how we need simpler methods of web animation in general, whether they be through CSS or any other method. Even a simple timeline-driven visual approach to animation that produces all of this CSS... like this: https://spiritapp.io/

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...