Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?

To create a sticky image portfolio section like on Deveb’s website—with changing content on scroll and full browser compatibility (especially Safari)—you need a mix of Webflow-native tools and JavaScript logic. Here’s how to do it optimally.

​

1. Understand the Design Behavior

​

• A sticky image area (often at the left) stays fixed as you scroll content (usually text or project titles) on the right.
• The image updates dynamically as each section enters the viewport.
• In Safari, issues may arise with the position: sticky + overflow: hidden/scroll combination, so a JS-based approach is more reliable.

​

2. Structure in Webflow

​

• Create a section with two columns: one for images (left), one for triggers/content (right).
• Left column: Add a div with position: sticky and top offset (e.g., top: 10vh).
• Right column: Stack multiple divs as content blocks, each representing a project and containing a data-id or custom attribute.

​

3. Use Webflow Interactions (Optional for Light Use)

​

• If using Webflow Interactions, you can animate image changes on scroll.
• This is more limited and may not perform well on Safari for complex behavior.
• Instead, lean into custom JavaScript for better control and performance.

​

4. JavaScript Scroll Logic (Using IntersectionObserver)

​

• Add a custom embed component at the bottom of your page (Page Settings > Custom Code > Before </body>).
• Use IntersectionObserver to detect which text block is currently in view.
• When a block is visible, update the sticky image container accordingly (swap the image source or background image).

​

Example logic (summarized):

• Select all .project-text-block elements.
• On intersection, read a data-image attribute.
• Change the src or backgroundImage of the sticky image div.

​

5. Ensure Safari Compatibility

​

• Avoid using overflow: hidden/scroll on parent containers of sticky elements. This breaks position: sticky in Safari.
• Prefer using a minimal DOM hierarchy, keeping the .sticky-image directly inside the section.
• Test image format compatibility (e.g., use .jpg/.png over .webp if needed for older Safari versions).

​

6. Optional: Use GSAP ScrollTrigger (for Advanced Control)

​

• For refined scroll behavior, use GSAP’s ScrollTrigger:
• Pin the sticky container.
• Animate image source swaps as scroll reaches new sections.
• GSAP improves browser consistency and performance.
• Load GSAP via CDN and initialize on page load.

​

Summary

​

To create a sticky image-based scrolling portfolio section like Deveb:

• Build structure in Webflow with sticky and scrolling divs.
• Avoid overflow parent containers for Safari support.
• Use JavaScript (preferably IntersectionObserver) or GSAP ScrollTrigger for interactive scroll-based image changes.
• This ensures high performance and cross-browser reliability, especially on Safari.