Pens from kelen https://codepen.io/imkelen/ en nospam@codepen.io Copyright 2024 2024-02-02T07:14:52-07:00 Multiline underline animation https://codepen.io/imkelen/pen/eYXMoKg https://codepen.io/imkelen/pen/eYXMoKg kelen

See the Code - See it Full Page - See Details

]]>
Multiline underline animation 2024-02-02T07:14:52-07:00
CSS & SVG Waves Animation https://codepen.io/imkelen/pen/ZEPLmyZ https://codepen.io/imkelen/pen/ZEPLmyZ kelen

See the Code - See it Full Page - See Details

I wanted to animated waves for the background of a page. Initially I tried a staggered loop animation in Javascript, but some mobile devices struggled really bad. This CSS3 version is hardware accelerated, simple, and is much more performant.

]]>
CSS & SVG Waves Animation 2024-01-16T09:11:30-07:00
Interactive Canvas Text https://codepen.io/imkelen/pen/NWJNJaP https://codepen.io/imkelen/pen/NWJNJaP kelen

See the Code - See it Full Page - See Details

A canvas + js banner, don't forget to interact!

]]>
Interactive Canvas Text 2024-01-08T08:32:32-07:00
THREE Text Animation #1 https://codepen.io/imkelen/pen/XWGbNRe https://codepen.io/imkelen/pen/XWGbNRe kelen

See the Code - See it Full Page - See Details

First in a series of experiments with THREE.js and type.

]]>
THREE Text Animation #1 2023-12-28T09:37:52-07:00
THREE Text Animation #1 https://codepen.io/imkelen/pen/yLwNVbV https://codepen.io/imkelen/pen/yLwNVbV kelen

See the Code - See it Full Page - See Details

First in a series of experiments with THREE.js and type.

]]>
THREE Text Animation #1 2023-12-28T09:37:16-07:00
THREE Text Animation #2 https://codepen.io/imkelen/pen/QWobKeW https://codepen.io/imkelen/pen/QWobKeW kelen

See the Code - See it Full Page - See Details

Second in a series of experiments with THREE.js and type.

]]>
THREE Text Animation #2 2023-12-28T09:19:30-07:00
Text Slot Machine https://codepen.io/imkelen/pen/OJqPdZy https://codepen.io/imkelen/pen/OJqPdZy kelen

See the Code - See it Full Page - See Details

]]>
Text Slot Machine 2023-12-27T05:56:28-07:00
Hamburger Menu Animations https://codepen.io/imkelen/pen/XWoeVqb https://codepen.io/imkelen/pen/XWoeVqb kelen

See the Code - See it Full Page - See Details

Four different menu animations for menu button toggle between hamburger, cross and back icon. Prefer Dots? Go this way: https://codepen.io/Zaku/details/YjRqzB/ Additional Source: https://github.com/tamino-martinius/ui-snippets-menu-animations

]]>
Hamburger Menu Animations 2023-09-18T03:39:05-07:00
Hamburger Menu Animations https://codepen.io/imkelen/pen/NWeaXYE https://codepen.io/imkelen/pen/NWeaXYE kelen

See the Code - See it Full Page - See Details

Four different menu animations for menu button toggle between hamburger, cross and back icon. Prefer Dots? Go this way: https://codepen.io/Zaku/details/YjRqzB/ Additional Source: https://github.com/tamino-martinius/ui-snippets-menu-animations

]]>
Hamburger Menu Animations 2023-09-18T03:36:28-07:00
React-Quill Insert/Embed Audio https://codepen.io/imkelen/pen/yLqGWpp https://codepen.io/imkelen/pen/yLqGWpp kelen

See the Code - See it Full Page - See Details

Demo of React-Quill, a React wrapper around the Quill rich text editor. See also: https://github.com/zenoamaro/react-quill https://github.com/quilljs/quill

]]>
React-Quill Insert/Embed Audio 2023-02-03T08:02:33-07:00