Animation question regarding interactive logo on website

Hi there,

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!

Hi Tyler,

Thanks for reaching out.
What you are trying to achieve is required custom development and beyond the scope of theme support, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.