SNAP ON SCROLL - GSAP Elementor Scrolltrigger (No plugin slider)

Implementing Snap Scroll Effect in Elementor
📌 The presenter spent five full days developing this custom design feature, which achieves a snap scroll effect without needing a plugin.
⚙️ The core functionality relies on setting containers to 100vh (100 view height) and applying specific CSS IDs and classes to the main container and individual sections.
🧩 The presenter offers their creation as a template in their Elementor Library for quick import and use.

Setup and Structure
🖼️ The initial step involves creating a main container set to full width, containing individual hero sections, each set to 100vh height.
🖼️ Background images for the hero sections must be centered, set to cover, and have no repeat.
🧹 Padding on the main container must be removed to eliminate unwanted white space around the edges.

Achieving Snap Scrolling
📜 To enable the snap scroll, users must apply a specific CSS ID to the main container and corresponding CSS IDs (e.g., `section one`, `section two`) to each hero section.
💻 The effect is activated by inserting a block of provided CSS code via an HTML widget and then inserting the provided JavaScript code (overwriting any initial placeholder content) via a second HTML widget.
🚫 The video notes that the built-in Elementor snap scrolling feature is poor and not smooth, hence the need for this custom code implementation.

Advanced Parallax/Layered Effect
✨ A secondary section is created (e.g., `Hero 1 bottom`) with a fixed pixel height (e.g., 400px) and a transparent background, positioned below the main hero section.
↔️ Custom CSS must be added to specific elements (like the background image and the moon image) within the hero section to control their movement speed using `transform: translate3d` properties, creating a parallax-like movement relative to the snap scrolling.
🎨 To achieve the final result, elements like the main background might move one way (e.g., `0%` to `100%`) while the foreground image (the moon) moves in the opposite direction (e.g., reversed percentages).

Key Points & Insights
➡️ Downloadable Assets: All necessary images and the complete code (CSS/JavaScript) are provided via links in the description for easy implementation.
➡️ Responsiveness: The scroll snapping feature is noted to work well, even on tablet devices, requiring only minor size adjustments for different screen dimensions.
➡️ Actionable Step: Ensure the main container has the required CSS ID, and each section has its unique section ID (e.g., `section 1`, `section 2`) before adding the HTML widgets containing the necessary CSS and JavaScript.

📸 Video summarized with SummaryTube.com on Oct 07, 2025, 04:09 UTC