How can I add a hover effect in Figma Sites?

[lethal marlin]

There is a hover effect I’m using in my regular design files, but when I try to do it in Figma Sites, I can’t seem to replicate it. Am I doing something wrong?

Any help would be greatly appreciated!

Here’s a Loom link to a quick video walkthrough of my issue: https://www.loom.com/share/d80a3f8dd12b4a3bb4581355f4fc3982?sid=b4d41fb1-9f87-4dbb-8024-81fe1023111d

[wet pasture]

Try creating component in figma sites. Connect default state with hover state with interaction and then import your default state in viewport

[lethal marlin]

I did try and the option isn't available it seems

Unless I'm missing something

[wet pasture]

Here is an example, how to achieve that. 🙂

[lethal marlin]

Ah I see!! Okay I dont know why now my brain is processing what you fully meant by creating the component INSIDE of Figma Sites! Okay i will try that next, thanks! 🙂

[lethal marlin]

@wet pasture Do you know how I can get this component to work as well?

The function im wanting is when I click on the Filters button - a drop down appears.

[wet pasture]

I got something like that. But I haven't played so much with drop down effects. I think you can take a look from Figma examples which they have put in community. Just duplicate website and see if there is drop down effect

Under closed component. I have put 0% opacity to show in open state.

[lethal marlin]

Ah I see! Not the most smooth, but a good alternative for now. Thanks again! 🙂

[runic willow]

hi

[lethal marlin]

Hey there again @wet pasture

I have a couple more questions:

1. Do you know if it's possible to have a horizontal scroll animation of SVG icons or just images in general?
   2. Is it possible to click on items in a navbar and have it scroll to a certain area on that same page?

[lethal marlin]

Found the answer to the 2nd one! haha

Okay mightve found the answer to the first one too! omg a quick google search is what ill do first next time Lol

[wet pasture]

Nice. I just wanted to post it but didn't went because i wanted to give you figma sites discord channel.

About 1. question you can use reveal, parallex or make code option

[lethal marlin]

Thanks! 🙂

[wet pasture]

/BP9ghB3h Here is link ending of Figma Sites discord which is official and Sites PO there is active.

[lethal marlin]

Not sure how that works

--

quick question: Im trying to make the navbar frame fixed at the top, but it seems I cant because "Only direct children of the page can be fixed"

But im not 100% sure what that means.

[wet pasture]

Create your nav bar in auto layout. After that you can put fixed position (example in screen record)

[lethal marlin]

Interesting, cause I did do that and it still wasn't working on my end.

I'll try again.

[wet pasture]

I just tested on new file and it worked for me. This was my layer structure:

Header container (auto layout)
— Nav container (auto layout)
—— Button
—— Button
—— Button

If it is not working, maybe it is a bug for you.

[lethal marlin]

Am I doing it wrong?

[wet pasture]

Try to put navbar-links outside of hero-section.

First need to be navbar-links and then hero-section. For navbar-links add top-padding and both sides just drag to the edge. Don’t forget to put position center.