steen hjalmar larsen

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?

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

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

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

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 https://codepen.io/GreenSock/pen/LYdewGx

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"); } },

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

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

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 new pen

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

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)

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

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

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

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 ?

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

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

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