Jump to content


  • Posts

  • Joined

  • Last visited

Nelou's Achievements

  1. Hello ! 2. is the solution I'm after. Craig, Jack, Rodrigo, thanks for your time, you guys are awesome ! Have a good day.
  2. Hello everyone, I've been looking around the docs, but I don't seem to find the answer. We do have a way to trigger js with "onLeave" "onEnter" etc, but is there a parameter in scrolltrigger that would let us use js at 50% of the scrolltrigger ? let tl = gsap.timeline({ scrollTrigger: { trigger: trigger, start: 'top top', end: 'bottom bottom', onEnter: () => {}, ???: () => { //here i'd need to use js at, let's say, halfway through the ST } onLeave: () => {} } }); or do I need to create a specific ST for that specific value ? Thanks a lot for your help, Best regards, Nelou
  3. Hello Rodrigo, It solved my many problems, thanks a lot ! I tried that in a previous version, but oddly enough, they were not synchronized the way I wanted. But if you tell me it's possible I'll give it an other shot ! Once again thank you so much for your reply. Have a fantastic day 😄
  4. Greetings everyone, I hope you have a wonderful day. I came up with a couple of issues trying to make my (very first) GSAP-based website, and I'm lost at sea. I want to apologize if my method are wrongs, and I'd gladly hear from you guys if you have any advice on to how you'd tackle this puzzle. First of all, I needed my sections to be pinned in place. For this, I looped in my containers and created a scrollTrigger for each of them, and took some extra room for the end, based to the initial height of the elements (100vh). It was mainly to give some time for the next container to get pinned before the first one would go away. for (let i = 0; i < containerArray.length; i++) { ScrollTrigger.create({ trigger: containerArray[i], pin: containerArray[i], pinSpacing: false, id: "pin"+containerArray[i], start: 'top top', end: '150% top', markers: true }); } One of my issue for this first part is, my first section is scrollable for 125% of the height of the viewport (which works as intended coded like that), but my other sections are scrollable for only 100% (because it's also how my code should work). Is there a better method to overlap sections while keeping the scrollable height identical and logical based on the height of the elements ? ----------------------------------- Onto the next part, that's probably where I started to make many mistakes. Now that I had a window in which both my current and next containers were on screen and pinned, I needed to insert a scrollTrigger between the moment the next container was pinned, and the current container was unpinned to trigger my animations. So I created an other scrollTrigger for each inner section, with a start and end value of 125% (which is 25% below the moment the next container is pinned, and 25% above the current container is unpinned. Used this method mainly to ensure the animation plays after the next container is in place and before the current container goes away.) For those specific scrollTriggers, and with the onLeave and onEnterBack methods, I add and remove a couple of classes, mainly to prevent sections to overlap even if they are hidden and keep allowing users to interact with the visible section (classes active / inactive) and changing the BG color of the body (to match the sections color). And after all that, I added my animation in the timeline. for (let i = 0; i < sectionArray.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: sectionArray[i], toggleActions: "restart none reverse none", start: '125% top', end: '125% top', id: 'animate '+containerArray[i]+" & "+containerArray[i+1], markers: true, onLeave: () => { document.querySelector(containerArray[i]).classList.add("inactive"); document.querySelector(containerArray[i]).classList.remove("active"); if(bgColor[i+1]){ document.querySelector("body").classList.add(bgColor[i+1]); document.querySelector("body").classList.remove(bgColor[i]); document.querySelector(containerArray[i+1]).classList.add("active"); document.querySelector(containerArray[i+1]).classList.remove("inactive"); } }, onEnterBack: () => { document.querySelector(containerArray[i]).classList.add("active"); document.querySelector(containerArray[i]).classList.remove("inactive"); if(bgColor[i+1]){ document.querySelector("body").classList.add(bgColor[i]); document.querySelector("body").classList.remove(bgColor[i+1]); document.querySelector(containerArray[i+1]).classList.remove("active"); document.querySelector(containerArray[i+1]).classList.add("inactive"); } } } }); //Animation that should happen right in between the pin of next container, //and the unpin of current container if(containerArray[i+1] !== "undefined") { tl.to(sectionArray[i], { alpha: 0, duration: 0.2 }) tl.from(sectionArray[i+1], { alpha: 0, duration: 0.2 }) } } It somehow works, but only if no resize is done and if we scroll slowly. When I resize, it seems to display wrong things (despite the scrollbar not moving at all since it's mainly opening the console and resizing horizontally?) and I have no idea how to resolve that. When I scroll too fast, the same thing happens. But I thing I know where it comes from. Probably from the fact each section has a scrollTrigger bound to said section, and the one after it (called with [i] and [i+1]), which means triggering multiple scrollTrigger at the same time basically asks for the same section to be animated "to" alpha 0 and "from" alpha 0 at the same time, but I have no idea how to fix that... I also can't seem to prevent the last scrollTrigger to appear, but that's probably just me being too deep into it that I can't find the solution that is right under my nose, haha ! I hope my code isn't a mess, I hope I've been clear enough for you to be able to give me some guidance. Thanks for reading, and have a good day ! Nelou.