▼
Streaming live at 10am (PST)

Interactions with Scroll To on single click

Design help General
#1

Hi all,

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?

Cheers all,

Steve

#2

Do you already have a demo we can look at?

#3

https://preview.webflow.com/preview/next-level-bikeshop?preview=587a2fdb92fa8e605f95af9c2e3dca4a

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.

Any thoughts would be welcome :slight_smile:

#4

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.

https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c

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.

#5

Hey Gary,

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 :slight_smile:

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 :slight_smile:

Ciao!

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

#6

Not a problem, I hope it works out. Have fun.

#7

Hey @energidesign,

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.

Cheers,
Jereme

#8

Hey Jereme,

Thanks for the compliments!

The rollover image scale is relatively easy to set up:

Create a div which is the main container, set it to flex with centre/centre for child divs, and set to your desired size/percentage, etc.

Set Overflow to Hidden.

Add new div inside it, with 100% width and height to ensure it fits the container.

Add background image to the inner div (this is your slide, basically) and set to Cover.

Then create an interaction on the outer container, that when you hover, the inner image div scales up to 1.15, and back down again on hover out.

Done!

Hope this helps :slight_smile:

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

#9

Awesome!

Thanks so much for showing! I really appreciate the help.

#10

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