All Activity

Hii guys, I am new to gsap and scrolltrigger and I really need your help. The issue is I am making one project where I am using scrolltrigger for triggering few basic animation like moving object. But I have found this bug which is if I have scrolled till the middle of and reload the page. Then scrollTrigger stops working. I even tried to observe markers and found that after i reload the page they kinda jump to random place, sometimes at top of page sometimes somewhere at the middle of page. I can't really recreate the demo because in demo it kinda seem fine working. Please help me out!!

Hello, community, I am trying to use react three fiber with gsap to create the effect that when the user scroll down the page, the sphere could rotate. But right now it does not work. Here is the codesandbox Thank you in advance!

I am on iPhone XR ios 17.4.1 I want to note that this happens on Safari and Google both, tested with a newer phone and it works fine. I am on the regular power mode. I did some further testing and I believe the error has something to do with: once(document.documentElement, "touchstart", function (e) { video.play(); video.pause(); }); I think it causes the video to stay paused on the first frame the whole time or something like that. I can solve this by making the video autoplay, and it works fine on mobile, however on the pc it keeps playing the video while I scroll until the video ends, and only then does it react to scroll how it should. To remedy that I came up with this: document.addEventListener('DOMContentLoaded', function() { var video = document.getElementById('component3d'); video.addEventListener('play', function() { this.currentTime = this.duration; }); }); and now the video is paused on reload on mobile, however when I begin scrolling, it does start to work as it should, without the need to manually unpause. The only problem with this method is that it causes a flicker of an unrelated frame when I start scrolling both on pc and mobile. Do you have any ideas on how I can make it not flicker or how do I solve this in another way? here is the link to the codepen: codepen.io/Gleb-Tuzhilin/pen/pomPeza

Thanks @GSAP Helper ! Eventually got this to work with multiple divs. But! It looks like scrolling affects the position of the follower within the div... https://codepen.io/j_baldwin/pen/BaeRdNW I alos get this is probably an inefficient way of setting up this kind of behaviour – if there's a way I can do it without duplicating the JS for every div, do let me know.

Hi Alex, Sorry for the late answer, this one went through the weekend cracks 🙏 I'm not 100% sure of what exactly is going on here TBH, I fiddled with your demo for a bit and try different approaches and the only one that seems to work is this: btn.addEventListener( "click", (e) => { portfolioScrollTrigger.disable(); scrollObserver.disable(false, false); lenis.scrollTo("#footer", { onComplete: () => { portfolioScrollTrigger.enable(); lenis.stop(); gsap.set(window, { scrollTo: "#footer", onComplete: () => lenis.start(), }) } }); }, true ); It predicates on loading the ScrollTo Plugin as well. I tried this: btn.addEventListener( "click", (e) => { portfolioScrollTrigger.disable(); scrollObserver.disable(false, false); lenis.scrollTo("#footer", { onComplete: () => { portfolioScrollTrigger.enable(); lenis.stop(); lenis.scrollTo("#footer", { immediate: true, // ignore duration and lerp onComplete: () => lenis.start(), }) } }); }, true ); But the scroll position was off, while the ScrollTo Plugin lands on the right spot. Is not the prettiest solution but it gets the job done. Hopefully this helps. Happy Tweening!

Hi, This is mostly about trial and error with translating the element as well as scaling it. Here is a fork of your demo: https://codepen.io/GreenSock/pen/GRammKy Hopefully this helps. Happy Tweeing!

Hi @Rodrigo, I found your code and I want to create a similar effect to show a small dic with some text when hovering on another div. I pasted your code into my files, and although when I hover the target div I can see the position values updating, I can't actually see the "follower" itself. I tried this with several different divs as well. Any ideas?

Hi @Derto and welcome to the GSAP Forums! I forked your demo and tested it on an iPad running iOS 17 and waited for almost 5 minutes after reloading and I can't seem to reproduce the issue you're mentioning. Maybe there are other specific steps to reproduce this that I'm missing here Is worth noticing that the versions of GSAP and ScrollTrigger you're using are a bit outdated (3.11.5). I updated them to the latest versions in the fork I created and tested on my iPad: https://codepen.io/GreenSock/pen/NWVjpVL Here is the debug version (no iframes) https://cdpn.io/pen/debug/NWVjpVL Hopefully this helps. If not, please be more specific on how to replicate the problem and the specific devices and iOS versions where you're seeing the problem. Happy Tweening!

I forgot we recommend using GSAP MatchMedia instead of ScrollTrigger's MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() While ScrollTrigger's MatchMedia method still works, it has been deprecated in favor of the one on GSAP's Core Happy Tweening!

Hi, Your demo is not loading neither the GSAP core file nor ScrollTrigger, that's why is not working. I forked and made some changes to it: https://codepen.io/GreenSock/pen/oNRWZMx Hopefully this helps. Happy Tweening!

Hi, Honestly I can't recall this issue with normalizeScroll. Can you create a minimal demo (emphasis on minimal) that clearly illustrates the problem? What I can see is that the touchend event is being called regardless of the vertical swipe of the finger. Maybe the information in this thread and Jack's explanation can help: Hopefully this helps. Happy Tweening!

Hello, please help me make such an animation. Is this even possible? Thanks in advance to everyone.

I noticed that if I reload and start scrolling like crazy, it works fine. But if I reload and wait for a little and then begin scrolling, then it is stuck on the first frame.

Hi, Maybe this demos can help getting started: https://codepen.io/GreenSock/pen/wvYVjvb https://codepen.io/GreenSock/pen/rNbELKO https://codepen.io/GreenSock/pen/pomvabo Happy Tweening!

Exactly, check the docs: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch If isTouch is equal to 1: 1 - touch-only device (like a phone) If is not 1, then is not a phone/tablet. Happy Tweening!

Hi @Rodrigo, Thanks for the insights. Shouldn't the smoother instance still be instantiated on desktop (no-touch) devices with the ScrollSmoother.create function wrap in this if statement? if (ScrollTrigger.isTouch !== 1) { const smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 2, normalizeScroll: true, preventDefault: true }); } ?

Both approaches are not very different in terms of performance. Pre-optimization at this level is usually wasted work!

Which one of the two would be more performant?

Hey, Thanks for the prompt response, but I think my question wasn't fully addressed. I'm specifically looking to combine multiple tweens and apply a single ease function across them (this thread purpose), not have the same ease running one by one on each of them. Considering `power.in` easing: Here's how it's behaving with the same easing on each tween (not what I want): Tween1: slow->fast Tween2: slow->fast Tween3: slow->fast (I made a video illustrating the problem with a dummy animation) What I want to achieve is the following easing: Tween1: slowest->slow Tween2: mediumSlow->mediumFast Tween3: fast->fastest I hope I explained it better. Indeed, adding the timeline to itself was a bad idea. demo-unwanted-behavior.mp4

Hi, Yeah in the next release we'll have the option to use both numbers and strings, for now you can either rely on Mitchel's suggestion to use numbers or in your project, go to the node_modules/gsap/types folder and in the gsap-core.d.ts file change this: type Point2D = { x: number, y: number }; type Position = number | string; To this: type Position = number | string; type Point2D = { x: Position, y: Position }; With that there should not be any issues while compiling. Hopefully this helps. Happy Tweening!

Hi, This might be about the type definitions here: https://github.com/greensock/GSAP/blob/f836a3f0002d6ea00f456a461c7e2976e0ec3f38/types/gsap-core.d.ts#L33 As you can see the Point2D type expects number and you're passing a number. We'll look into this and get back to you. Please stand by. Happy Tweening!

Why is there no problem at compilation ? Do you know ?

i've set a codepen but the scrolltrigger doesn't work and the anchor links yes https://codepen.io/lagalga/full/BaeRzzy

I don’t use typescript but all tweens that use height calculations based on window height or width use window.innerHeight, y: “10vh” becomes y: ()=> window.innerHeight * 0.1, it is also wrapped in a function this has the added benefit of recalculating on screen resize. You can do the same with window.innerWidth. Hope it helps and happy tweening!

The only thing I can think of is scroll-beahvior: smooth;, we've seen a fair amount of issues related to that here in the forums. Also I would be careful with scroll-padding-top since that could lead to some issues with ScrollTrigger calculations: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top Happy Tweening!