I have an Interactions query. I have an interaction set up (2.0) where clicking a link block expands (accordion) a block further down the page to reveal content, and clicking it a second time contracts/reverses that same action.
I also want the user to be scrolled down to that section when the link block is clicked (first click), but the scroll doesn’t apply on the second clip (this causes funky up/down motion if the user is scrolled back up the page when they click the link block to close it…).
Is there no way WITHIN the interactions panel, to say scroll to a pageID anchor? Then it could be assigned on the first click only…
Otherwise, I’m going to have to put a (redundant) close button in the expanded panel to perform the close interaction. This is redundant because if the user clicks on the link block to show the content then changes their mind, they have to move the mouse or scroll further, etc…
Any thoughts or solutions would be very much appreciated. For me, page anchor scroll WITHIN interactions would be a huge help. Thoughts?
The page is Equipment, and you can see Rider Equipment and Bike Equipment. The idea would be to have two clicks to open and shut the sections (only Rider is active right now, work in progress), which is what I did have in place, but the issue is getting the page to scroll down to the page anchor (eq_rider) but only on the first click and not on the second. The scroll links are added to the element and not the click(s) which makes it unusable in this scenario.
I am currently thinking I would have a single click to open/expand plus the scroll down, and then have a close/collapse button inside the revealed section to simply zip it back up, which then won’t affect the current scroll of the page.
Hey @energidesign, don’t mean to jump in but, I had to say… I love this site A LOT! Awesome job dude. It’s super clear, compact, slight micro-interactions. Just plain tight dude!
With that, I would suggest using a slide left and right interaction instead of up and down.
Button Triggers:
Rider & Bike Equipment and content above (Equipment + paragraph) are all inside a main div. When Rider is clicked everything slides to 30% left and shows 70% right - which is the content for Rider. And vise-versa for Bike.
On my collection site, go to Split Screen Page. Click on either block to see what I mean.
And of course, it can be lest tall or it can slide a section out - to be under the equipment + paragraph. A number of options with it. And your page will stay in tack.
Thanks for the awesome feedback and compliments on the work, means a lot to me for a fellow Webflower to appreciate the nuances and fun of the site. Means I’m on the right track
Thanks for the sliding suggestion also. I took a look at your example, but I’m not sure it’ll help me here — the main reason I am doing it vertically is for a simple responsive solution down to mobile, so the panels simply expand downwards to reveal the content which is then scrollable on the phone. Once I have a close button in the panel then I think it’ll be OK. I might fix the close button to the right upper side so the user doesn’t have to scroll back to the top to be able to close it…
Thanks again for getting back to me, and feel free to check in again on the site in the next days and let me know what you think of the solution I (hopefully) come up with
I love the design. And I’m very curious to find out, How did you make the images in your background slider have the zoom effect? I want to add a similar zoom effect to one of the sections on my page.
