Web Technology Demo

Who

This demo was inspired by Alberto Garcia Ariza.

Where

The demo was found on CodePen.

When

The demo was created on April 8, 2024.

What

This demo animates list items using CSS. Each list item is pushed into view when it is scrolled on top of and is pushed away and faded when it is scrolled away from.

Why

This demo is interesting because it shows a way to make lists interactive and it allows for emphasis. Someone may want to use this demo when they do not want to show all list items all at once, but want to emphasize each list item one by one.

Steps for Writing the HTML Code

1. Create an unordered or ordered list
2. Create list items
3. Apply classes to the list and the list items

            
            <ul class="example-list">
                <li class="item">List Item 1</li>
                <li class="item">List Item 2</li>
                <li class="item">List Item 3</li>
                <li class="item">List Item 4</li>
                <li class="item">List Item 5</li>
                <li class="item">List Item 6</li>
                <li class="item">List Item 7</li>
                <li class="item">List Item 8</li>
                <li class="item">List Item 9</li>
                <li class="item">List Item 10</li>
            </ul>
            
        

Steps for Writing the CSS Code

Creating the Animation

1. Create a @keyframes animation and give it a name
2. Create four steps inside the animation: entry 0%, entry 100%, exit 0%, and exit 100%
3. Inside the entry 0% and exit 100% steps, set the opacity property to 0 and the translate property to 100% 0
4. Inside the entry 100% and exit 0% steps, set the opacity property to 1 and the translate property to 0 0

Styling the List

1. Set the list-style property to none
2. Set a value for the height property
3. Set the overflow-y property to scroll and overflow-x property to hidden

Styling the List Items

1. Give the animation property the following values: linear and your animation name
2. Set the animation-timeline property to view()

            
                @keyframes pushin-pushout{
                    entry 0%  {
                      opacity: 0;
                      translate: 100% 0;
                    }
                    entry 100%  {
                      opacity: 1;
                      translate: 0 0;
                    }
                    exit 0% {
                      opacity: 1;
                      translate: 0 0;
                    }
                    exit 100% {
                      opacity: 0;
                      translate: 100% 0;
                    }
                  }
                
                .example-list {
                    list-style: none;
                    height: 100px;
                    color: white;
                    font-size: 2em;
                    overflow-y: scroll;
                    overflow-x: hidden;
                }
                
                .item {
                    background: #135e17;
                    padding: 0.5em;
                    margin-bottom: 3px;
                    animation: linear pushin-pushout;
                    animation-timeline: view();
                }
            
        

View Demo