![Effect trying to recrate ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fppdl353qelgo5i125zd.gif) This is just a way and probably neither the best way nor the way Netlify does it. There are lots of things not thought about like accessibility. Here is the code pen link, in this article I will try to walk you through this [recreation](https://codepen.io/panzar/pen/mdQyzbG). ## Recreating this effect Let’s dissect this animation, we have 3 different parts that we can see 1. Grow Animation ( the gradient underline also grow with the div) 2. Elevator go-up animation 3. Shrink 4. Background Gradient Dance. Let's start with arguably the main animation — The elevator animation. ### Elevator Go-Up Animation The list items are moving up in animation. We create an element that moves up `.train` nested within `.shaft `element where overflow-y is clipped. To do this `.train` have `position:absolute` within .shaft which have `position:relative` to contain `.train` element within itself. Here is the HTML ```HTML

I can pet

Cats
Dogs
Parrots
All my pets

!!!!!

``` Also here are a few things we need to take care of - The first child is visible when the animation is not playing. We do this by adding `top:0px` to the `.train` class - The animation stays in its final state once it's over. We simply set the `animation-fill-mode` to forwards Here is the CSS for `.train `and for its animation `go-up` ```CSS .train { position: absolute; animation: go-up 3s linear 3s forwards; top:0px; margin: 0; padding: 0; list-style: none; } @keyframes go-up { from { transform: translateY(0); } to { transform: translateY(-100%) translateY(1lh); /*translateY(1lh) so the animation stops before last element goes up*/ } } ``` Here is the CSS for `.shaft` and `.content` ```CSS .content { height: 1lh; display: flex; } .shaft { display: inline-block; min-width: 10ch; margin-left:1ch; /*Important lines */ height: 1lh; overflow-y: clip; position: relative; } ``` Codepen just for the elevator go-up animation only. {% codepen https://codepen.io/panzar/pen/xxQbJOM %} ### Gradient underline Ideas that didn't work for this - Add an underline: CSS doesn't support gradient underlines yet - Adding an ::after pseudo-element to the `.shaft` doesn't works due to the `overflow-y: clip `thing. I propose we add a new element `.elevator` which is a parent of `.shaft` and with the sole purpose of gradient underline. #### Here is the new structure ```HTML

Cats
Dogs
Parrots
Hamsters
any pet ever

``` The animation is simple here -For the pseudo-element just use Scale(0) and scale(100%) -For the .elevator use change the width property. code for .elevator and its gradient grows and shrink animation for the `::after` pseudo element and itself. ```SCSS .elevator{ position:relative; min-width: #{$--starting-width}; margin-left:1ch; animation: grow #{$--expand-anim-dur} linear #{$--init-dur} forwards, shrink-to-final #{$--shrink-anim-dur} linear #{$--shrink-anim-delay} forwards; } @keyframes grow{ from{ width: #{$--starting-width}; } to{ width:#{$--largest-width}; } } @keyframes shrink-to-final{ to{ width:#{$--final-wdith}; } } .elevator::after{ content:""; display:block; position: absolute; width:100%; height:10px; background: var(--gradient-bg); transform-origin:left; transform:scaleX(0); animation: expand #{$--expand-anim-dur} linear #{$--init-dur} forwards, shrink #{$--shrink-anim-dur} linear #{$--shrink-anim-delay} forwards ; bottom:-0.5ch; } @keyframes expand{ from{ transform:scaleX(0); } to{ transform:scaleX(100%); } } @keyframes shrink{ from{transform-origin:right; transform:scaleX(100%)} to{ transform-origin:right; transform:scaleX(0); } } ``` ## Gradient Dance Firstly we need to design a gradient that - Turns black at the end - Has a lighter tone in between Here is what I used — ```CSS linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(1,1,11,1) 33%, rgba(9,9,121,1) 33%, rgba(0,212,255,1) 66%, rgba(9,9,121,1) 100%); ``` 1. 0–33% solid black is here so when we set the background size to 300%. The black is able to cover the complete text. 2. Rest of the gradient goes from dark shade to light and then dark again. This part will be 2X the size of the text. so there is enough space for the effect to be seen. We cannot animate gradients in CSS but add the gradient to the background, set text-color to transparent, use background clip now we have gradient text. We animate this by moving the background. Here is the animation and element. ```SCSS .train > li:last-child{ background:var(--gradient-large); -webkit-background-clip:text; background-size:300%; color:transparent; animation: gradient-move #{$--bg-dance-anim-dur} ease-in #{$--shrink-anim-delay}; } @keyframes gradient-move{ from{ background-position:right; } to{ background-position:left; } ``` ## Orchestrating this animation There is a lot going on and we need to tie it all up. Basically setting the animation duration and adjusting the animation delay accordingly is important here. This example uses SCSS variables to track duration and to calculate delays. Here is the order of animations happening - expansion of .elevator + the expansion of gradient underline. **Delay**- `$ — init-dur` **Duration**- `$ — expand-anim-dur` - The going-up effect **Delay**- `$ — go-up-anim-delay:$ — init-dur+$ — expand-anim-dur` **Duration**- `$ — go-up-anim-dur` - Shrinking of .elevator + the shrinking of gradient underline. **Delay**- `$ — shrink-anim-delay:$ — go-up-anim-delay+$ — go-up-anim-dur;` **Duration**-` $ — shrink-anim-dur` - Gradient text animation **Delay**- `$ — shrink-anim-delay:$ — go-up-anim-delay+$ — go-up-anim-dur; `starts with the previous animation but lasts longer. **Duration**- `$ — bg-dance-anim-dur` Here is the end product {% codepen https://codepen.io/panzar/pen/mdQyzbG %} Thanks for reading this article please provide feedback on it, and comment if you find a better way to do any of these parts. orignal published at [medium.com](https://p10.medium.com/recreating-the-go-up-effect-on-netlifys-home-page-19534d23db23)

p10dev

Recreating the Go-up effect on Netlify’s home page.

Join Our Newsletter. No Spam, Only the good stuff.