On the current site I’m working on I’m using Tabs to make the user switch between different statistics. Every statistic category has an own gradient to bring in some colorfulness.
What I’m trying to do now (- and which I struggle with) is to make the gradients transition from one to another. I figured in order to do this I have to put the gradient divs out of the tabs to make them transition through opacity.
One thing that destroyed that plan though is that I can’t tell the button which gradient I’ve selected before it transitions to the next. So I would have to transition every gradient (4 in total) - so three to 0%, one to 100%
That wouldnt look great.
Is there a way to accomplish this? I’ve heard that you cant change a single color within a gradient so I don’t really know what to do now.
WebGL might be an option but I honestly don’t know anything about that and would get into that
Make a unique gradient, that’s 4 times as tall as your tabs. Make a unique gradient inside, that will be made of a succession of your 4 actual gradients. Position it with absolute to the top or bottom. Then your IX will now just have to move the gradient up and down. Try it, maybe you’ll like it
Another solution is to have only one gradient, from a color to the same color but transparent. Then underneath you place an element with a color. Then your IX will now change the color of that element. Some of your gradient will stay the same but some will change.
If you want to stick with what you did, add another gradient below your 4 existing ones. The tell your IX to do 1. fade out all 4 gradients, then fade in the appropriate one. So you kinda reset the IX each time. In that case it makes like a double transition: current gradient to 5th one then 5th one to current?
I thought of the first option aswell but isnt that extremely difficult to pull off performance-wise? I can imagine that it gets very laggy.
The second option sounds very promising, that will be my last resort if nothing else works (as I want to keep the juicy instagram gradient I got right now )
I will go with the extended div - 4 times as tall/wide.
One quick thought though. How do I tell the interaction on the button the current position?
Like if I’m on the last section of the 400VW/VH gradient and I want to move it all the way to the start of the gradient, how do I achieve this? It needs to be somewhat dynamic in terms of which gradient I’m currently on
