[ScrollTrigger, REACT react-router-dom]

Thanks again for your nice reply

Unfortunately, your fine suggestions did not solve my problem.

After some exploration, I can see that a resize event handler is created from the scrollTrigger, which continues to be found on subsequent pages.
On my front page I get from inspect
getEventListeners(window).resize.forEach((elm)=>{console.log(elm)})
VM12085:1 {useCapture: false, passive: false, once: false, type: 'resize', listener: ƒ}
VM12085:1 {useCapture: false, passive: true, once: false, type: 'resize', listener: ƒ}
It seems that it is the event handler with "passive: true" that is causing trouble.
 

I can remove it in the inspect window on the other pages and that solves the problem
getEventListeners(window).resize.forEach((elm)=>{if(elm.passive === true){removeEventListener('resize', elm.listener)}})
but unfortunately I can't get this code to work in React

 

In React I can't use "getEventListeners(window)" react claims that getEventListeners is not a function?

[ScrollTrigger, REACT react-router-dom]

Thank you for replying so quickly, i will definitely take a look at it, it looks very interesting

[ScrollTrigger, REACT react-router-dom]

Having problems with killing scrollTrigger on mobile when i shifting between different pages. It works fine on desktop. 

Have set up a pen where it actually works, but when I do the same on my online site it doesn't work

Link: pen

Link: my site

Has anyone had similar problems and possibly found a solution

[Horizontal scroll with feedback for navigation]

What I'm looking for is
1. When the page is loaded and the user has not yet scrolled down to the horizontal scroll, nothing happens
2. When the user scrolls down to the horizontal scroll window and the horizontal animation starts, it is registered
2.1 When Panel 1 is in focus, I get information that panel is active (console.log(panel.id)
2.2 The same happens with the rest of the panels

The example that Jack shows works a little better, but also has errors. e.g. if I scroll to panel 2 but undo my scroll and scroll back then it will not be registered? and then I also get feedback here that I am at panel 1 when the page is loaded

[Horizontal scroll with feedback for navigation]

Hi Cassie
It's a bit strange, it seems that both box 1 and box 2 are activated in the console when the page is loaded. When you start scrolling to e.g. box 2 gives it box 3 in the console

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

[Horizontal scroll with feedback for navigation]

Unfortunately didn't quite understand your suggestion iDad5, could you make a pin as an example, on the other hand the pin that Cassie has created seems to work fine
Thank you both, have spent a whole day without finding a good solution.
Was thinking about using onUpdate, but couldn't get it to be dynamic

 

gsap.timeline({

            scrollTrigger: {

                onUpdate: (self) => {

                    let breackPoint = [0, 0.33, 0.66, 1];

                    let thisProgress = Number(self.progress.toFixed(3));

                    if (thisProgress > 0 && thisProgress < breackPoint[1]) {

                        console.log("first-inteval");

                    }

                },

[Horizontal scroll with feedback for navigation]

Is there a way to find out which panel is active / visible when scrolling with the mouse
Would like the navigation to show the panel that is archived e.g. by un underlining
Have been trying for a long time without success to find a solution

 

Would greatly appreciate a solution

See the Pen oNqpOQE?editors=1111 by shl (@shl) on CodePen

[vetical and horisontal scrollTrigger]

Thank you very much for your solution, it works
I had tried something similar, but had set snap to 1, which was the problem
Obviously a little confused about how snap works

[vetical and horisontal scrollTrigger]

Think I found a solution, although it's not quite dynamic
If someone has a way to automate the process, e.g. with a loop, I would greatly appreciate it
Tried myself without success

See the Pen KKoyxNw?editors=1111 by shl (@shl) on CodePen

[vetical and horisontal scrollTrigger]

Hi Cassie
Thanks for the quick response
I have two panels with class="container-panel" both of which I would like to animate with ScrollTrigger
One panel is at the top of the page, the other at the bottom
The problem is that only the first one gets animated

[vetical and horisontal scrollTrigger]

Trying to build a horizontal and a vertical scrollTrigger
1.The first scrollTrigger ".container-panel" should animate two div box vertically
2. The next scrollTrigger ".panel-wrapper" should animate a row of boxes horizontally
The horizontal animation works fine, but the vertical animates only the first box?
What am I doing wrong?

Incidentally, I have a little doubt about what is best in practice in relation to the horizontal scrollTrigger's end property
a. than: "+=3500"
b. end: "+=" + panel.reduce((p, c) => p + c.offsetWidth, 0)

See the Pen abYVYJz?editors=1111 by shl (@shl) on CodePen

[REACT / GSAP -- Horizontal snapping sections (advanced),with internal navigation]

Hi Jack
Tried another variation of your suggestion which seems to work
  snap: {
               snapTo: 1 / (panels.length - 1),
               inertia: false,
               duration: { min: 0.1, max: 0.1 }
   }
I remembered that I had used something similar another time
Thanks for pointing me in the right direction

[REACT / GSAP -- Horizontal snapping sections (advanced),with internal navigation]

 

Thanks for the response Jack, unfortunately setting "initia: false" made no difference
As I understand it, when we add an empty dependency Array in REACT, the useEffect is only activated on load of the page, where does the error consist of that?
By the way, removing the dependency array does not change anything in relation to the error I have
Once again, thank you for your response

[REACT / GSAP -- Horizontal snapping sections (advanced),with internal navigation]

As far as I can see, replacing useEffect with useLayoutEffect doesn't change anything
Oddly enough, clicking twice on the same link with a slight time shift seems to fix the problem
It's not a solution I'm particularly happy with, so if someone has a better solution I'd greatly appreciate it

Has opdatede my codesandbox 

 

 

[REACT / GSAP -- Horizontal snapping sections (advanced),with internal navigation]

REACT / GSAP
Trying to use "Fake Scroll Horizontally (Advanced)" along with an internal navigation
Having a problem getting the internal navigation to work every time. Sometimes it scrolls to a wrong section and sometimes it works fine?

It works fine with normal scroll

Here is a link to codesandbox

All help is welcome

[ScrollTrigger, REACT and Vertical scrolling effect]

15 hours ago, GreenSock said:

Actually that isn't true - look at the console: 

 

 

You are right that there is a difference in what is registered as a parent node
In Vanilla JS it is "#root", while in React it is first "#root" and then it changes to ".pin-spacer"
Can see that GSAP changes the DOM

 

THANK YOU once again for your responsec 💕

[ScrollTrigger, REACT and Vertical scrolling effect]

Thank you so much it worked 😀
Strange that it works with Vanilla JS without pinSpacing: true. where I also use display: flex

[ScrollTrigger, REACT and Vertical scrolling effect]

Yes I have looked at quite a few of the examples from
"Getting Started with GSAP + React" and "GSAP + React, Advanced Animation Techniques"
but have not been able to find any solution to my problem.
It seems strange that my React code does not work as all DOM elements are loaded when I use useEffect

[ScrollTrigger, REACT and Vertical scrolling effect]

Having trouble getting ScrollTrigger in REACT to work
Creates a Vertical scrolling effect that works in vanilla javascript, but not in REACT ("https://codesandbox.io/s/gsap-scroll-4nl2tv?file=/src/App.js")
Have now spent mage days troubleshooting, any help would be greatly appreciated

See the Pen jOzbEWm by shl (@shl) on CodePen