Complexity(difficult) behavior

[Roman Truhanov]

Hi all! I'm continue learning GSAP. After learning thons of docs and examples i want to write something mine...  In my project i want to using features:

1. horizontal and vertical scroll looping (working code is here Nuxt - Starter (forked) - StackBlitz)

2. horizontal and vertical smooth scrolling working normal (code based in this example Drag Smooth Scroller (codepen.io))

3. horizontal and vertical full screen scrolling (horizontal don't know how, vertical work normal)

4. horizontal and vertical mouse drag (throw error code based in this example Drag Smooth Scroller (codepen.io))

In separate feature worked normal, but all together not working right. My Stack Blitz how to make working right?

 

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

[Cassie]

Hi there.

I'd love to help you here but there's a lot of layers of complexity.

1) Nuxt

2) Tailwind

3) A variety of different demos all used together.

Would it be possible to strip this back to vanilla JS and the minimum possible amount of plain old CSS so that we can just focus on the GSAP code and see what's happening more clearly?

Also, it would be very helpful if you could explain the desired/expected behaviour vs what the issue is.

"not working" or "how do I make this work" are very vague statements and they don't help us help you very effectively.

[Roman Truhanov]

I make it CodeSandbox. Everything almost works but not all right...

Problem one function createScrollTrigger() blocked normal work.

two other function createXLoop() and function createYLoop().

Problem two I'm write two function createYScrollTrigger() and function goToYSection() for soft scroll animation to center screen in vertically. Maybe not ideal but work right.  How to make same effect for horizontally scrolling?

Problem three in function createObserver() events OnPress and OnDrag in my case create error. I want to make simple drag scrolling. 

Note function createScrollTween() just help function for create fake horizontal scrolling.

[Rodrigo]

Hi,

 

I think you are overcomplicating this far too much. For horizontal sections is better to not use native horizontal scrolling, just fake it using vertical scroll. I haven't found a single website or app out there that actually uses native horizontal scrolling to animate things, they use some variation of this example:

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

 

Here you can see how to combine vertical and horizontal sections:

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

 

Also I can't seem to understand why you have to those callbacks that scroll the window to a specific point. Is far simpler IMHO to use ScrollTrigger snap functionality as shown in the second example.

 

Unfortunately I don't have time now to dig through your code and adapt it to make it simpler, but hopefully the examples help you find a better and simpler way to make what you're trying to achieve.

 

Happy Tweening!

[Roman Truhanov]

Hello, Rodrigo. In my code alertly read fake horizontal scroll. But scrolling animation to linear to simple. I want make scroll animation most interested more dynamically your other example i am searching "day witch fire". 

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

 for scrolling it's a cool.

[Rodrigo]

Hi,

 

Unfortunately still is not really clear to me what you're trying to achieve here.

 

In your last example (codesandbox link) you have this:

function createXScrollLoop() {
  ScrollTrigger.create({
    markers: true,
    start: 0,
    end: "max",
    horizontal: true, // HORIZONTAL TRUE HERE
    onLeave: (st) => {
      st.scroll(2);
      st.update();
    },
    onLeaveBack: (st) => {
      st.scroll(ScrollTrigger.maxScroll(window, true) - 2);
      st.update();
    }
  });
}

That horizontal property there, tells ScrollTrigger to check for the window's horizontal scrollbar position. That is not fake horizontal scrolling using vertical scrolling that is checking the browser's actual horizontal scroll value.

 

Once again I think you are overcomplicating this too much. If you are just starting with GSAP I'd recommend you to keep it simple to begin with and then start adding features to your code in order to go through a gentler learning curve, we see that quite often in these forums.

 

Unless you clearly explain to us what you are trying to do (perhaps share the link of an example that works the way you intend) and create  a minimal demo that clearly illustrates the problems you're facing, I'm afraid we'll keep looping like we already have.

 

Happy Tweening!