Scroll Trigger Events using Fixed Side Bar Layouts

Have a couple of questions after experimenting with the Flexbox Fixed sidebar layouts:

  1. Is there a method to trigger an on-scroll event that occurs within the fixed sidebar such as an image transition and/or replacement? Also wondering same for triggering a gif animation or video in the sidebar area.

  2. When using the split layout (fixed sidebar / main content scrollable), have noticed that the scrolling main area doesn’t seem to allow for on-scroll transitions either. Is there a specific method that has to be applied for this?

Thanks in advance for any assistance.


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

Hi @BlueBird, thanks for your great questions. It would be really helpful to share the read-only link to the site, to take a look at the structure. Here is how to share the link: Share a read-only link | Webflow University

For #1, are you trying to click a button to show a gif animation or video to be shown? I am a little unclear exactly what the target is.

For #2, do you mean, if you click a link, the page does not scroll to the target section? Maybe if you can help to clarify this, probably the read-only link will help, if you have started to work on this already.

Thanks in advance!

Hi Dave,

Thanks for the follow up. Unfortunately, I cannot share the Webflow build as it is for a corporate entertainment media project that I’m working on. However, let me see if I can provide more clarity on the issues.

Scenario 1
Normally, you can assign scroll trigger interactions on page elements that occur as they come into the viewable area. No button clicking is applied for this user flow. Just as in this tutorial on the Webflow help pages: https://help.webflow.com/article/how-to-set-up-a-scroll-trigger-interaction

Issue
Scroll trigger assignment does not work while using a fixed side bar layout: https://help.webflow.com/video-tutorial/fixed-sidebar-layouts

On the scrollable ‘Main Content’ side with ‘Overflow Scroll’ enabled, the scroll trigger interaction doesn’t activate. I wanted to have a photograph appear with a y-axis movement and opacity 0-100%ease in. I applied the same parameters as shown in the tutorial videos. Only after disabling the ‘Overflow’ selection on the ‘Main Content’ container does the scroll trigger interaction activate.

Scenario 2
Photo displayed in fixed left side bar transitions to another photo once right side ‘Main Content’ reaches a defined scroll position. Again, no button clicking is applied for this user flow. i.e. Show cast photo shown in left side bar fades to next cast photo once user scrolls past their Bio/Editorial info on right-side main content. Basically, as users read through Actor Bios, the photos automatically transition on left fixed side bar.

Scenario 3
Video Clip or Gif activate in fixed left side bar once right side ‘Main Content’ reaches a defined scroll position. Same thing as above, but this time with an animated gif or video being triggered.

Issue for 2-3
Cannot find way to create an on-scroll interaction connecting the left fixed side bar content to the scroll action on the right main content well.

Hopefully this can clarify my specific questions. Thanks again for any assistance you can provide.

Hi Dave,

Wanted to follow back up to see if you have been able to look into my questions 10d ago on activating scroll trigger interactions linking a fixed sidebar content to an overflow scroll section?

Any assistance would be helpful. Thanks!

Hi @BlueBird , from what you describe it is very hard to follow with no visual. If you would like you could PM Dave or any other Community Expert privately and we will be glad to help. Thanks for understanding. :+1:

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