Omnia

Hello, I realize that this is an old discussion but I have almost the same problem. I've added a ScrollTrigger animation and a simple tween to have a horizontal scroll and was working fine until I started adding content to the page. I've tried everything you mentioned in that post to debug the issue but it still not working. there's no errors in the console. I would be grateful if you take a look on it. HTML <?php get_header(); ?> <div class="infinite-scroll-wrap"> <div class="wrapper"> <section id="first" class="slide one"> <p> Omnia </p> </section> <section id="second" class="slide two"> <h1>2 Section <small>Secondary text</small></h1> <p> This is a content.</p> </section> <section id="third" class="slide three red"> <h1>3 Section <small>Secondary text</small></h1> <p> This is a content. kvkcx lmv nmcv, /cv <br> dnsvjksnvamdfnbklsdn/dgmn;dgmkldxn </p> </section> </div> </div> <?php get_footer(); ?> Js // wait until DOM is ready jQuery(document).ready(($) => { gsap.registerPlugin(ScrollTrigger); const red = document.querySelector(".red"); gsap.to(red, { scrollTrigger: { toggleActions: "restart pause resume reset", start: () => red.offsetLeft - innerWidth, end: () => red.offsetLeft + red.offsetWidth - innerWidth, scroller: ".infinite-scroll-wrap", id: "color" }, duration: 3, backgroundColor: "#f6f4f2", ease: "none" }); const sections = gsap.utils.toArray(".slide"); gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".wrapper", scroller: ".infinite-scroll-wrap", pin: true, scrub: true, snap: 1 / (sections.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + (document.querySelector(".wrapper").offsetWidth - innerWidth) } }); }); functions <?php $version = wp_get_theme()->get('version'); function SnapStay_styles() { wp_enqueue_style('bootstrap', "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", array(), null, 'all'); wp_enqueue_style('style', get_template_directory_uri() . "/assets/css/main.css", array('bootstrap'), $version, 'all'); wp_enqueue_script('jquery'); wp_enqueue_script('popper', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', array(), false, true); wp_enqueue_script('bootstrap',"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js", array('jquery', 'popper'), false, true); wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js', array('jquery'), false, true); wp_enqueue_script('scroll', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js', array('jquery','gsap'), false, true); wp_enqueue_script('main', get_template_directory_uri() . "/assets/js/main.js", array(), $version, true); wp_enqueue_script('main', get_template_directory_uri() . "/assets/js/main.js"); } add_action('wp_enqueue_scripts', 'SnapStay_styles'); ?> CSS body { margin: 0; overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .red { background-color: #cf3535; background-image: none; } .slide { display: inline-block; width: 110vw; height: 100vh; } .wrapper { display: inline-block; white-space: nowrap; font-size: 0; } .wrapper > * { font-size: 1rem; }

You're a wonderful human being. Thank you !

It worked perfectly but with a horizontal scroll movement, so I add the function (gsap.utils.toArray) to fix it. The problem is that now I can scroll horizontally but the color animation is not working anymore Thanks a lot for your reply https://codepen.io/Omnia-/pen/vYGXYxe

Hi, I'm new to gsap so I'm not sure what's causing the animation to play only once in this demo despite of (toggleActions: "restart pause resume reset") The horizontal scroll trick here is having 2 containers and rottating the inner container so it scroll horizontally. *I hopw you see what I mean in the codepen any suggestions?