ARTICLE AD BOX
Code is from Elementor.
I want the snapping only to occur to the one container inside elementor. The rest of the site I want to scroll normally.
Right now the rest of the site is not visible..
The first code is inside the Elementor settings additional CSS and the second and third inside Elementor HTML widgets.
<script> window.addEventListener("load", function () { gsap.registerPlugin(ScrollTrigger); // Select all Elementor containers const sections = gsap.utils.toArray(".snap-section"); // Set every section fullscreen gsap.set(sections, { minHeight: "100vh" }); // Smooth snapping ScrollTrigger.create({ snap: { snapTo: 1 / (sections.length - 1), duration: 0.4, ease: "power1.inOut" } }); // Optional fade animation sections.forEach((section) => { gsap.fromTo(section, { <link data-minify="1" rel="stylesheet" href="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/fullPage.js/3.1.2/fullpage.min.css?ver=1778753253" /> <style> /* Secties */ .section { display:flex; flex-direction:column; /* Tekst onderin */ justify-content:flex-end; align-items:flex-start; height:100vh; /* Ruimte voor header */ padding-top:120px; padding-bottom:60px; padding-left:40px; padding-right:40px; box-sizing:border-box; font-size:6rem; overflow:hidden; position:relative; } /* Navbar */ .navbar { position:fixed; top:0; left:0; width:100%; background-color:transparent; display:flex; justify-content:space-between; align-items:center; padding:10px 20px; z-index:10; } .navbar .logo { font-size:1.5rem; font-weight:bold; color:#f1f1f1; } .navbar .links { display:flex; white-space:nowrap; } .navbar .links a{ text-decoration:none; } /* Hoofdtekst */ h1 { color:black; opacity:1; margin-bottom:20px; } /* Scroll tekst */ .scroll-text { position:fixed; top:50%; transform: translateY(-50%) rotate(-90deg); font-size:1.5rem; color:#f1f1f1; opacity:0.8; z-index:5; } .scroll-text.left { left:20px; } .scroll-text.right { right:20px; } /* fullPage helper */ .fp-tableCell { display:table-cell; vertical-align:middle; width:100%; height:100%; } </style> <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.11.5/gsap.min.js?ver=1773388756"> </script> <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js?ver=1773388756"> </script> <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/fullPage.js/3.1.2/fullpage.min.js?ver=1759923533"> </script> <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.11.3/gsap.min.js?ver=1759923533"> </script> <script> document.addEventListener( 'DOMContentLoaded', function(){ const fullpageInstance = new fullpage( "#fullpage", { scrollingSpeed:1000, autoScrolling:true, scrollHorizontally:true, navigation: false, scrollOverflow: false, onLeave:function( origin, destination, direction ){ const leavingText = origin.item.querySelector( "h1" ); const enteringText = destination.item.querySelector( "h1" ); const line = destination.item.querySelector( ".line" ); const navbarText = document.querySelectorAll( ".navbar a, .navbar h2" ); const scrollTexts = document.querySelectorAll( ".scroll-text h2" ); gsap.to( leavingText, { opacity:0, y:-100, duration:1.5, ease:"power2.out" } ); gsap.fromTo( enteringText, { y:100, opacity:0 }, { y:0, opacity:1, color: destination.item.getAttribute( "data-text-color" ), duration:1.5, ease:"power2.out", delay:0.5 } ); const newBgColor = destination.item.getAttribute( "data-bg" ); const newTextColor = destination.item.getAttribute( "data-text-color" ); destination.item.style.backgroundColor = newBgColor; if(line){ gsap.to( line, { color:newTextColor, duration:0.5 } ); } gsap.to( navbarText, { color:newTextColor, duration:0.5 } ); gsap.to( scrollTexts, { color:newTextColor, duration:0.5 } ); const newLineWidth = (destination.index+1) *150; const currentLineWidth = (origin.index+1) *150; if(direction==="down"){ if(line){ gsap.to( line, { width: newLineWidth+ "px", duration:1.5, ease:"power2.out" } ); } } else{ if(line){ gsap.to( line, { width: currentLineWidth+ "px", duration:1.5, ease:"power2.out" } ); } } }, } ); document.getElementById( 'link1' ).addEventListener( 'click', function(){ scrollToSection(1); } ); document.getElementById( 'link2' ).addEventListener( 'click', function(){ scrollToSection(2); } ); document.getElementById( 'link3' ).addEventListener( 'click', function(){ scrollToSection(3); } ); document.getElementById( 'link4' ).addEventListener( 'click', function(){ scrollToSection(4); } ); function scrollToSection( sectionIndex ){ fullpageInstance.moveTo( sectionIndex ); } }); </script>