Jump to content
Search Community

Rodrigo last won the day on April 19

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Rodrigo last won the day on April 19

Rodrigo had the most liked content!

Profile Information

  • Location
    Santiago - Chile

Recent Profile Visitors

41,607 profile views
  1. Hi, That's because the value returned from the getScrollLookup method is returning -Inifinity, so that definitely is not going to work. I don't have time to dig into this right now, but if you look at the demo I posted it works even with pinning, which makes me think that there is something else in your demo that is causing this. The HTML/CSS of my demo is quite simple, but it works without any issues with a pinned section. My advice would be to maybe create a simpler setup in order to make this work, start stripping some stuff until it works the way you intend and then add things back to it until it breaks, then you'll identify what's causing the problem. Happy Tweening!
  2. Hi @Renson Ralph Bitara and welcome to the GSAP Forums! There is a lot of code in your demo and we don't have the time resources to comb through all that and find what the issues could be. After a quick glance I can see some issues in your code though. What is this actually doing? What's the purpose of this? window.addEventListener( "load", function (e) { init(); setInterval(function () { ScrollTrigger.refresh(); }, 100); }, false ); A setInterval will keep executing over and over. That doesn't look right to me, to be refreshing every ScrollTrigger instance every 100 milliseconds. I don't see the use of that particular code. Then you have this: gsap.fromTo( ".services-content-heading-inner", { yPercent: 100 }, { yPercent: 0, autoAlpha: 1, duration: 2, ease: easeInOut } ); ScrollTrigger.create({ target: ".services-content-heading-inner", start: "top top", end: "bottom bottom", markers: true }); You are creating an animation, then you create a ScrollTrigger instance, but what's the objective of that ScrollTrigger? What is actually controlling? For what I can see nothing really. Finally this: ScrollTrigger.create({ start: 0, end: "max", onUpdate: updateValues }); By default this ScrollTrigger instance will work with the window element and scroll position, so that means everytime the user scrolls that function will be called. Again I don't see the use of this. If you want to know if something is in the viewport, why not create a ScrollTrigger instance for that specific element that can tell you whether or not that element is in the viewport? I think you are overcomplicating things quite a bit and you should take a few steps back and go for simpler things first and then start adding more animations and complex stuff to your app. Finally I suggest you to take a look at our getting started guide: https://gsap.com/resources/get-started and a closer look to the ScrollTrigger docs and demos in order to get a better grasp of how ScrollTrigger works: https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Happy Tweening!
  3. Hi, Sorry about the issues but the demo URL is not really working, I see a lot of previews but I keep getting a 502 error in them. It seems that the dev server is exiting with an error so you might want to check that. If possible create a demo in Stackblitz and not use a git repo since that doesn't really allow us to fork the demo, since we need to fork the entire repo as well and that further complicates things. Happy Tweening!
  4. You might want to use localStorage instead of sessionStorage then: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Maybe the demo in this post can help: Happy Tweening!
  5. Hi, Great to hear that you were able to solve this and thanks so much for sharing your solution with the community! I'm 100% sure that many users will benefit from your knowledge and generosity! 🥳 Happy Tweening!
  6. Hi, I don't see any ScrollSmoother in your demo and neither an element with position: fixed One of the caveats of ScrollSmoother is that elements with position fixed should be outside the smoother wrapper: https://gsap.com/docs/v3/Plugins/ScrollSmoother/#caveats But since ScrollSmoother is integrated with ScrollTrigger you can use pinning like you'd do in any other normal setup, so there is no need for position fixed inside the wrapper. We have this demo that uses ScrollSmoother in a SvelteKit app: https://stackblitz.com/edit/sveltejs-kit-template-default-dvnud9 I'm not really well versed in Svelte/SvelteKit yet, but for what I've seen and played with it, I really like it. Hopefully in the future we'll be adding more demos to our collections in order to better help our users. Happy Tweening!
  7. Ideally every GSAP instance you created Tween/Timeline/ScrollTrigger/Draggable/SpiltText, etc. That's why I suggested the GSAP Context route, you can create/add all those to a GSAP Context instance and when you navigate to another page just use the revert method: const ctx = gsap.context(() => {}); // Throughout your code add GSAP instances to the GSAP Context one // Before changing to a new route ctx.revert(); // BOOM!!! // All the GSAP instances added to that context are killed and reverted // Super simple and easy cleanup, you just worry about writing your code // and create awesome animations, GSAP does the heavy lifting for you. But once again, if what you're doing right now works and makes the most sense to you, then keep it. Happy Tweening!
  8. Hi @hebert lima and welcome to the GSAP Forums! Is always better to use the reversed() method to toggle a GSAP Tween/Timeline instance: https://gsap.com/docs/v3/GSAP/Tween/reversed() https://gsap.com/docs/v3/GSAP/Timeline/reversed() Then you can use the browser's sessionStorage to keep the value: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage Here is a fork of your demo: https://codepen.io/GreenSock/pen/GRLwEQq Hopefully this helps. Happy Tweening!
  9. Hi, The issue here is that you're not considering pinning. Pinning creates vertical space to allow the element to stay pinned so if you create a ScrollTrigger instance for an element that is after the pinned section, of course those calculations will be off because that extra space. Even though the recommendation is to create your ScrollTrigger instances in the order they appear on the screen, in this case is better to create all of them (especially since they're not pinned) after every pinning ScrollTrigger before any of those sections, has been created. This seems to work the way you intend: theme.animations = function () { const ColorChange = function () { ... }; // Horizontal Lock Scroll const horzScroll = gsap.timeline(); const horzScrollEl = document.querySelector(".horz-scroller"); var wrap = document.querySelector(".scroller__list"); if (horzScrollEl) { horzScroll.to(".scroller__list", { x: -horzScrollEl.scrollWidth + window.innerWidth + "px", ease: "none" }); ScrollTrigger.create({ pin: true, // markers: true, trigger: ".horz-scroller", // scroller: "#main", start: "center center", end: "+=" + (horzScrollEl.scrollWidth - window.innerWidth), scrub: 1, animation: horzScroll }); } ColorChange(); }; Hopefully this helps. Happy Tweening!
  10. Hi @Rohit Pathak and welcome to the GSAP Forums! Mixing ScrollTrigger with Observer is a bit more complicated than just use the Observer Plugin. If I was you I'd try to solve everything just with the Observer Plugin alone (like the website you linked). I think most of your problems could stem from this: onUp: () => { if (timeLine1.totalProgress() < 1) { timeLine1.play(); console.log(timeLine1.totalProgress()); } else if (timeLine1.totalProgress() == 1 && timeLine2.totalProgress() < 1) { timeLine2.play(); console.log(timeLine2.totalProgress()); } else if (timeLine2.totalProgress() == 1 && timeLine3.totalProgress() < 1) { timeLine3.play(); console.log(timeLine3.totalProgress()); } }, Now I wouldn't use that approach at all. What I would do is to track the amount of steps each timeline has and if the amount of taken steps of a particular section are completed (4 out of 4, if a section requires 4 wheel events to complete a timeline for example) just move onto the next section. I would approach this as a user controlled content slider where each slide has some specific internal animations that should complete (in any direction) before going to the next/previous slide (if any of course). Also instead of checking for progress I would just use a simple boolean that should be toggled to true when the user scrolls and toggle it back to false after that particular section is completed, in order to use that as something that prevents the user from keep scrolling and perhaps triggering the animations of other sections. Right now I don't have the time to dig into this and create a minimal demo for you that illustrates the approach I described above, but hopefully this gives you an approximate idea of what I think should be the best course of action for something like this. Hopefully this helps. Happy Tweening!
  11. Hi, I don't have any experience with Astro, but maybe you might want to have a look at GSAP Context as it could provide a simpler solution for this: https://gsap.com/docs/v3/GSAP/gsap.context() Now if this approach is not too convoluted (it doesn't really seems like that), does what you need and works well in production, then just use it: "if it ain't broken, don't fix it" 🤷‍♂️ Happy Tweening!
  12. Hi @Fullerfort, Right now you have a logic issue since you're running your code only for the first page: PAGES.forEach((page, index) => { set(page, { z: index === 0 ? 13 : -index * 1 }); if (index === 0){ to(page, { rotateY: `-=${180 - index / 2}`, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 2) * (window.innerHeight * 0.25), markers:true, }, }); to(page, { z: index === 0 ? -13 : index, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 1.5) * (window.innerHeight * 0.25), }, }); } else return false; }); That code block is running only when the index is 0, so the first page. May I ask why you changed the JS logic jh3y created? If is not broken don't fix it. Just changing the content of the pages should be enough IMHO. If you want to study and learn what is being done and why, then that is mostly related with JS logic and not really a GSAP issue. I'd recommend you to have a peak at MDN: https://developer.mozilla.org/en-US/docs/Web Happy Tweening!
  13. This is the debug link on devtools: https://i.imgur.com/CvJDG6V.mp4 I'm seeing exactly the same on an android (chrome-firefox) phone and iPad (chrome-safari) 🤷‍♂️ Sorry but I can't seem to replicate the problem you mention. Happy Tweening!
  14. Hi, I still think that this is related to something you're adding on the HTML/CSS of your project (or maybe wordpress is). I forked your demo and stripped all the CSS that wasn't need, the bare minimum, and is working as expected on my android phone on orientation change: https://codepen.io/GreenSock/pen/MWRzJJV Here is the debug view (no iframes, just like a regular website) https://cdpn.io/pen/debug/MWRzJJV If you check that link on a small screen and flip the orientation you'll see that the pinning works as expected. That gives me more ground to state that this is not a GSAP related issue, but something else in your setup that is causing this. Hopefully this helps. Happy Tweening!
  15. Function based values mean that when the ScrollTrigger instance is refreshed that end value will be whatever number/string that function returns. If oyu're doing some sort of calculation whose result might change that calculation will be run again. In the particular snippet you added the end point is based on the height of an element, if a screen resize changes the height of that element then the end point will be recalculated as well. Hopefully this clear things up. Finally it seems that you have created two different threads for the same issue, please let's keep the discussion in just one thread. That will make easier to follow and focus our efforts, thanks! Happy Tweening!
  • Create New...