Jump to content

steen hjalmar larsen

  • Posts

  • Joined

  • Last visited

steen hjalmar larsen's Achievements

  1. 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
  2. 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
  3. 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"); } },
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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)
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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 💕
  14. Thank you so much it worked 😀 Strange that it works with Vanilla JS without pinSpacing: true. where I also use display: flex
  15. 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