Hi there,
I would like to check how can i create this kinda line animation(see attached image), i tried to use mouse hover and scale the bar, but i can only make the 1st scaled bar animation happens but not the 2nd one.
and this how the animation looks like https://basicagency.com/, scroll to the footer and you will see it.
Here is my project [link]
I’d make the bar a div of width 300%, so 3 times the width of the link, with the link block, with the link block set to overflow hidden.
Then color the div using a bg gradient with steps at 33.33 and 66.66%, making it one third white, then one third black, then the last third white.
On hover, I’d make the div move right 300% too, then reset in 0s at the end of the anim.
Like this for example. Taken from my other project and didn’t modify the initial state of the line which is in my case invisible while in your example it is shown. But you will get the idea.
If only bg gradients were animatable we wouldn’t even need IX 
The drawback with gradients is that we won’t have the snappy feeling of separate lines (well, in my case the same line quickly transferred to the other side of the element) moving in place.
The drawback with gradients is that we won’t have the snappy feeling of separate lines
Yes you will set two colors at the same stop and you have a clear seperation.
No, i meant the animation easing:)
As it would be a transition, you’d get to set the easing too! And with wf, in the best conditions, with the box with the graph… or am I missing something…
