So I’ve managed to make an animated logo for my website I’m working on as seen below:
The logo is made up of three PNG files that are placed in a CSS Grid Element to line up correctly as shown in the image in the top left corner.
I’m wanting to try and make a specific interaction where when you hover over the words “Fortress” and “Fitness” the bar will move along with the words.
My goal is to make it look like a weight lifting bar moving up and down like when someone’s lifting it and it’s doing a “rep” in workout terminology.
So, my idea is to make the words “Fortress” and “Fitness” Scale to be larger when hovered over with the mouse through an interaction animation. That’s the easy part. But where I’m stumped is how to connect the Bar animation to shift up or down in relation to the words scaling interaction.
To further clarify, When you hover over the word “Fitness,” the word will get larger and the bar will shift up and the word “Fortress” would Scale Down, and then vice versa. Hopefully that makes sense. I tried checking the conditions section for something that could link the bar element but no luck.
Any tips or advice are welcomed. Thanks!