Ill describe the outcome I am looking for, and the complications that have prevented me from moving forward.
The page I am working on is the “Tools” page. My intentions are to have a very very simple clean page with product names and “+” symbols next to their titles.
Upon hovering I am attempting to have the following occur:
A “ghost” or highly transparent image of the product fades in to take up the entire background.
The “+” symbol rotates clockwise 90-120 degrees
Additional information on the product slides out and that information appearing causes anything below to simply slide down a little to make room.
I am not to far away, but I am beginning to guess to much and its creating some mess which is why I am reaching out. Currently…
The first product name is showing as 1 line in the back end, but when viewing the site it shows as 2 lines of text and I am unsure as to why. Once you hover it moves to one line of text.
Their is no fade in or drop in effect for the text on the initial transition. However, the 2nd transition and all future transitions do have the proper fade in drop in effect.
When the hidden text loads it does not move the content below it, so it ends up behind the 2nd products title.
Lastly, the big background image is not loading on hover.
I should also mention, these sections will all need to be links as each one will open a page for the product.
Thank you very much for any help you can provide!
T.
You are pretty close to the result that you want. Just have to be more “clean” in the interaction steps.
Lets go step-by-step. I will reply in few messages, so it will be more clear.
First will take care about Product header. For keep it in one line make “product page tool wrapper” display: block (instead of inline-block)
For more correct behavior in the interaction, initial appearance for this element has to have not only display:none, but also height: 0px, opasity: 0%, position: move up 17px.
Then go to interaction.
With structure that you have, we can make your interaction works perfect. But then, when you will add next products, all steps that you have in this interaction will affect ALL elements with classes “hidden brush text” and others, when you will hover just one of products. So you will have to change structure a bit or change element, which should be hovered, and probably end up with not only one interaction.
Hope I was able to explain clear.
Let me know what is your decision and will help you with interactions.
Hello, Tyler.
Could you tell me, more details about your idea? That background brush will be only one for all page or there will be different pictures for different products?
Each product will have its own background image. It will be the image of the product name they are hovering over. In addition the items will need to be clickable to navigate to the product specific page.
For Background you can do not use move up and down part, then remove it from initial position too.
And try to keep “general” elements (like wrapper, plus sign, text) same classes (names). It will let you use same interaction for many same structured parts.
Anna you are sincerely helpful.
Your video made it so easy. I played with the animations a bit and its exactly what I was going for. Thank you again =)
Sometimes it make sense to write down on the paper some kind of plan, what and where should move with interactions. And yet pretty helpful to check Webflow tutorials about interactions When I get stuck with something I am visiting this page ( https://interactions.webflow.com/ ) for refresh my memory.
