Need help with "Close Form" interaction

Hi all.

I have a hero section on my website that contains a button that when clicked, starts an interaction called ‘RevealHiddenHeroForm’.

The form is inside a div that is set to display:none and pushed off screen. When clicked, it animates in and sets a display of block.

This works fine, my issue is trying to get the form to not display when the user clicks an image inside the container. I have an image sitting on the top right of the container. I’ll eventually replace it with an image of an ‘X’

Its interaction is called ‘closeHeroForm’ and when clicked it pushes the div back to its origin and sets the display to none. The problem is, its just not doing anything. At all. I’m not really sure what my issue is.


Here is my public share link: LINK
(how to access public share link)

I’m looking at your issue.

To begin with, you have some counter productive setup for your image bg:

http://vincent.polenordstudio.fr/snap/sqcrv.jpg

And depending on the width of the viewport, you run into problems. I suggest those settings in order to always fill the space and to have the head of people in sight at all times:

http://vincent.polenordstudio.fr/snap/f10gp.jpg

I come back to talk abt your issue.

1 Like

(Also Adobe Stock is nice but don’t you find it very expensive? I tend to buy on Depositphotos… not the best but way more affordable)

OK so several things.

Your element is moved 800px to the right from the Style panel. It’s CSS, so this is its ORIGINal position.
When you want this element to go back to that position, don’t make it move 800px on the right, just add a move behavior and set nothing, it will read “Move to origin” (with all values to zero).

Also, you have a bug: the reveal interaction is also set on the dialog itself (was hard to locate :slight_smile: ) and this messes up ith the click event. Remove this.

So once those 2 steps done, add another thing to pass the box to display none and you’re all set, it works:

http://vincent.polenordstudio.fr/snap/rh3he.jpg

1 Like

WOW. This is a lot of great info.

My morning is mostly filled with meetings, so I wont get to implement your solutions till the afternoon. But i will certainly give you an update. This looks to be the solution i needed.

As far as adobe stock goes, we get it included in our subscription that our artists guys get. I don’t know all the details but I dont think it would be any cheaper if we didn’t get adobe stock as well. They seem to like it.

This is a great time to say “I want to be a full time designer” and stop doing meetings :stuck_out_tongue_winking_eye:

yeah this was just me being a bit disappointed at Adobe abt that. they wrote to me as a CC subscriber to say that Stock was a great news, and they try to sell me licences at 10 times the price I can buy them elsewhere, for the same image they claim to have exclusivity on. So basically they’re the new Getty: quality at an enormous cost :slight_smile:

Ha. I’m a very mediocre designer. I’m a .Net MVC developer. I use webflow because it allows quick WORKING wire frames that our designers can then play around with. I use webflow specifically because the exported code is easy to work with and convert into a web project.

That’s great to hear :slight_smile:

@vincent

I solved my issues this morning. Your help was straight to the point and easy to follow. Thank you for being awesome.

2 Likes

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