CodeMyUI

<div class="container">
  <form autocomplete="off">
    <div class="finder">
      <div class="finder__outer">
        <div class="finder__inner">
          <div class="finder__icon" ref="icon"></div>
          <input class="finder__input" type="text" name="q" />
        </div>
      </div>
    </div>

CodeMyUI

<header class="header" data-scroll>
  <div class="container">
    <h1>Header</h1>
  </div>
</header>
<main class="main">
  <div class="container">
    <h2>Check out <a href="https://scroll-out.github.io/">scroll-out.github.io</a> for info and documentation.</h2>
    
    <h3>Placeholder text👇 </h3>

CodeMyUI

Directionally blooming words 🎨

Directional bloom letters built with Splitting.js + Scrollout 👍

Opportunity to take scroll-snap for a spin 🤓

Enjoy!

A Pen by Jhey on CodePen.

CodeMyUI

<div class="site-wrap">

  <section data-scroll>
    <h1 data-splitting>Scroll on down</h1>
    <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor
      at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
      pariaturlores sunt esse magni, ut, dignissimos.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est.
      Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo
      sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis

CodeMyUI

Cascading text effects w/ Splitting + ScrollOut ✍️🤓

I've been wanting to try out Splitting.js and ScrollOut to recreate a pen I made some time back for cascading text animations: https://codepen.io/jh3y/pen/wJMPYQ.

So here it is! Enjoy! 😎

A Pen by Jhey on CodePen.

License.

CodeMyUI

<div class="page">

  <h1 data-splitting>ScrollOut + Splitting.js</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>

  <h1 data-splitting>Triggering Splitting Animations on Scroll</h1>

  <p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, 

CodeMyUI

nav(class='rating')
  ul
    each number, i in [1, 2, 3, 4, 5]
      - var cls = ''
      - if(i == 0)
        - cls = 'current'
      li(class=cls)
        - if(number >= 4)
          span
        svg

CodeMyUI

3D Shopping cart animation

From https://dribbble.com/shots/6795955-Shopping-Cart-Interaction

Verlet physics from https://codepen.io/guerrillacontra/pen/XPZeww

A Pen by Aaron Iker on CodePen.

License.

CodeMyUI

button hover animation

A Pen by GDW on CodePen.

License.

DEMO https://codemyui.com/pricing-tag-style-link-in-pure-css/

CodeMyUI

Blurred, Invisible Ink, and Redacted text (CSS only)

Exploring some ways of visually hiding or obscuring text with CSS filters and pseudo-elements.

A Pen by Adam Ruf on CodePen.

License.

DEMO https://codemyui.com/pure-css-blurred-invisible-and-redacted-text-effect/