Streaming live at 10am (PST)

Help with multiple interactions on hover. Should be Novice(ish) Level


#1

Hey guys,
This is throwing me for a loop. Thanks for any help you can provide.

Here is a link to the site: https://preview.webflow.com/preview/askergo?preview=e8bb5716111925346efe28ae99ebfcf1

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:

  1. A "ghost" or highly transparent image of the product fades in to take up the entire background.
  2. The "+" symbol rotates clockwise 90-120 degrees
  3. 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...

  1. 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.

  2. 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.

  3. When the hidden text loads it does not move the content below it, so it ends up behind the 2nd products title.

  4. 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.


#2

Hello @tturner422.

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)


#3

Next step, "hidden brush text".

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.

Cheers,
Anna


#4

You have been really helpful so far! Thank you!

I think it would be best to change the structure to be correct. Looking forward to your help!

T.


#5

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?


#6

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.

Thank you for your help!


#7

Ok, will figure out structure and will back to you


#8

Well, check this video and recreate structure like I did, pls.
https://drive.google.com/file/d/0B-7cg8BSq1Z_Nl9qT1BZcFl1OTQ/view?usp=drivesdk

Only thing I forgot to capture at the end: Hidden brush text - display:box, padding=60px. It will align text with header.

When structure will be new, I will show how to apply correct interactions wink

Regards,
Anna


#9

Anna!
You are so rad...
I have the structure correct, it was super easy to follow your instruction. Excited to see how you setup the interactions.

T.


#10

Ok, I made it work. Had to make 1 little change in structure: background picture moved out from Product Wrapper, don't forget to make that change.
Everything else on the screencast: https://drive.google.com/file/d/0B-7cg8BSq1Z_cTRKY3FXcHJFMkk/view?usp=drivesdk

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.

Good luck wink

Anna


#11

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 =)

T


#12

I am glad we reach the goal smiley

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 wink When I get stuck with something I am visiting this page ( https://interactions.webflow.com/ ) for refresh my memory.

Regards,
Anna


#13

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