COG Digital

So I was able to solve this on Wordpress for anyone else interested. I used a model from the demos and then tweeked it to get it to work in the page builder. In Divi, I needed to have a section with a row and a code block, with all my code and styling inside as per codepen below. https://codepen.io/cogbranding/pen/BammQZj

Thanks again for the response. I totally understand what you mean as I've read through the docs and forums. I can see GSAP working and on scroll adding the fixed positioning and transforming as expected. Prior to the scroll on the trigger container, there is no transform or positioning set, so for me its a real head scratcher. I'm not sure if it has to do with the flex but I guess I will just have to continue working on various ways to get it working as expected.

Hi OSUBlake, thanks for the response. So I've made a loom for you to watch how its actually occurring on my website. Like it works, but the start and end aren't correct. AND I can scroll past the section. It should stop at that section until I've scrolled through and then continue the vertical scroll. https://www.loom.com/share/f54c196a87604294ba324ed0a86da493

Hi mate, thanks for the update. I've updated the codepen to contain the HTML. https://codepen.io/cogbranding/pen/dyZWXKg

Hi all, I'm hoping to get some assistance so that I can have a fake horizontal scroll work. Ideally, I want to not be able to scroll past this horizontal scroll until I've reached the end of the section and then continue scrolling vertically. I'm using Wordpress with Divi themebuilder. I've read all of the fourms and demos and tried multiple solutions however none seem to operate as expected. I've done a codepen to showcase my CSS and JS. However as my HTML is not raw, and rather done with Divi builder, I've added a screenshot to show the representation of data that I currently have. Currently, the section is where the #gsap-horizontal-section id has been placed. I've then added the css classes ".gsap-x" on each row. Hoping this makes sense and that someone can assist! Thanks in advance.

Hi, I've added the below scripts to the header.php file of our website. <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js id='gsap-js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollToPlugin.min.js' id='gsap-scroll-js'></script> <script type='text/javascript' src="https://unpkg.com/@barba/core"></script> My HTML and JS is below. I can console.log out from within the functions so I know they're loading however the GSAP does not seem to be. I'm also not getting any errors in console. The website is on wordpress divi theme if this is any help. <div id="intro"> <section class="video-panel" data-section="creative" data-permalink="#" style="right: 50%;"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Projects</span> </h1> </div> </section> <section class="video-panel" data-section="solutions" data-permalink="#"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Client Services</span> </h1> </div> </section> </div> gsap.registerPlugin(ScrollToPlugin); window.addEventListener("load", function(e) { (function onIntroLeave(e) { gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: '50%', ease: "power3.out" }) }) (function onIntroHover(e) { var per = (e.pageX - window.innerWidth / 2) / (window.innerWidth * 2); var dir = Math.min(1, Math.max(-1, e.pageX - window.innerWidth / 2)); var pow = Math.pow(per * 5.5, 2); var right = Math.min(100, Math.max(0, 50 + (50 * pow * dir))) + '%'; gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.out" }) }) (function onIntroClick(e) { intro.removeEventListener('mousemove', onIntroHover); var section = this.dataset.section; var permalink = this.dataset.permalink; if (section === 'creative') { var headerX = '-3em' var right = '0%' var otherVideo = intro.querySelector('.video-panel[data-section="solutions"] video') } else { var headerX = '3em' var right = '100%' var otherVideo = intro.querySelector('.video-panel[data-section="creative"] video') } otherVideo.pause() barba.prefetch('/' + section) gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 0.5, width: '100vw', height: '100vh', ease: "power3.inOut" }) var circle = gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 1, css: { clipPath: 'ellipse(101vw 101vw)' }, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] h2', { duration: 0.5, x: headerX, ease: "power3.inOut" }) circle.eventCallback('onComplete', openPage, [section, permalink]) }) // (function videoLoaded() { // vLoaded++; // if (vLoaded === vCount) { // introLoaded(); // pageLoaded(); // } // }) }); Thanks