GSAP Help - ScrollTrigger not performing as expected.

[COG Digital]

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. 

 

 

See the Pen dyZWXKg by cogbranding (@cogbranding) on CodePen

[OSUblake]

Hi COG Digital,

 

It's impossible to say what's going on without a working minimal demo as ScrollTrigger is dependent on your CSS and HTML. An easy way to get the HTML is to inspect the element in your dev console, right click on it, and then select Copy > Copy outerHTML. 

 

 

 

[COG Digital]

Hi mate, thanks for the update. I've updated the codepen to contain the HTML. 

 

[OSUblake]

Hi COG Digital,

 

I'm a little confused about the question now. I added your missing GSAP scripts, and gave the body some height and it seems to working as far as I can tell unless I'm missing something. 🤷‍♂️

 

See the Pen mdqBRLp by GreenSock (@GreenSock) on CodePen

 

[COG Digital]

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

[OSUblake]

It looks like the container isn't being pinned in your video, but I don't know how to recommend fixing that as it works in the demo, and we can really make suggestions based on code we can see in context. The only thing that I can that think that might be messing with it is some of the classes or inline styles on or around the container like in a parent element.

 

 

 

[OSUblake]

4 minutes ago, OSUblake said:

The only thing that I can that think that might be messing with it is some of the classes or inline styles on the container.

 

As an example, I wrapped everything in a div that has transform style on it, which will break the fixed positioning.

 

See the Pen GROMMOo by GreenSock (@GreenSock) on CodePen

 

It's not a GSAP issue, it's just how CSS works.

 

https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children"

 

 

[COG Digital]

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. 

[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. 

 

See the Pen BammQZj by cogbranding (@cogbranding) on CodePen