Skip to contentSkip to footer

Synced interactions

Polypane syncs most interactions between all panes.

Mouse interactions

Hover and click interactions are synchronised between panes. This means you will see the hover effect in each pane, and click interactions that trigger focus or open a menu are applied everywhere.

The hover synchronisation can not fully simulate a mouse hover, so there are rules that are not applied: CSS rules that change child or pseudo elements of hovered elements are currently not applied, and thus won't be shown.

Mouse clicks are fully simulated. This means that any mouse-triggered focus is also applied on all panes. Due to the asynchronous nature, your focus will probably shift from the current pane when interacting with forms.

Scroll syncing

The scroll position in panes is synced automatically, and you can toggle it on and off using the button in the address bar or by pressing cmd/ctrl o.

By default scroll syncing works on the page viewport (which is the same as the html element) but some websites set the height of the html and the body elements to 100%, making the body element the scroll container. Though we recommend that you don't do that, scroll syncing will automatically switch over to sync the position of the body element.

Scroll syncing is disabled when BrowserSync is detected

Browsersync can sync the scroll position but because it's slightly slower than Polypane's scroll syncing, it continuously resets the scroll to a previous position, leading to a very frustrating experience.

Polypane will disable its scroll syncing when it detects Browsersync with "ghost mode" active to prevent this poor behavior. We recommend you turn off ghostMode in Browsersync and let Polypane handle all the event synchronisation.

Polypane will show a popup notifying you about this for every page that it detects browsersync on.

Keyboard interactions

Key presses are synchronised between panes, so that any shortcuts you may have on a page will be triggered in all panes, as well as any form input

Form filling

Interacting with forms is synced between panes. Anything typed into an input or textarea or any selection made in a select, radio or checkbox is automatically applied in the other panes too.

Polypane Message Bus

For events that aren't synced out of the box by Polypane, you can use the Polypane Message Bus.

Is your question not answered?
Ask via Twitter, Slack or our contact form

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for freeView pricing
Polypane screenshot