dagda1

I'm definitely not denying it is complex but I still think the code lacks readability and rather than just blindly copy and pasting this code (which I have done :). If people understood it, then maybe they would post fewer support questions. I would like to understand it but the way it is written makes that hard. Would it be possible to get a typescript version of the seamlessLoop? I've tried to type it and it is not easy. Performant code does not have to be illegible.

One thing that frustrates me about gsap is that the answer to forum questions is often a big mush of pretty illegible code like the loop function in this. I find this loop code in lots of answers, the code is not well-formatted and very hard to read. Worse than that, it is slightly different more times than not depending on the context. I think having this big slab of code as the answer is a bad answer and does not educate anyone on how to get the best of gsap. Could this loop be turned into a primitive or something to stop this copy-whack of code to cure problem that is happening?

You need to create the remix project with the aws architect template. The code runs in a lambda

I finally got it sorted and it was a bit convoluted. This was a remix project hosted on AWS. I had to add this to my remix.config.js serverDependenciesToBundle: [/^gsap.*/],}

I'm on the latest pnpm, pnpm always alerts you when a new version is available. The docs say to add it like this: pnpm add gsap@npm:@gsap/shockingly Which I did and I'm definitely not good :).

I've removed `node_modules` multiple times and all the usual fixes. I am using pnpm and I have gsap declared like this in the package.json file "gsap": "^3.12.4", and I have this override for the `gsap/shockingly` "pnpm": { "overrides": { "gsap": "npm:@gsap/shockingly@^3.12.4" } } If you look at the stacktrace, it cannot find `gsap` in `node_modules/gsap`. Should there be a `@gsap/shockingly` folder in `node_modules?

I have the club account and I have this in my package.json "gsap": "npm:@gsap/shockingly@3.12.4", I used to be able to load ScrollTirgger and ScrollText without error but I have changed the project type to esm and I Now get this error I am not sure how to debug this

Nice link. Very inciteful. Thank you

Hi, Thanks for the link. Is there any way to make the animation go slower? I've tried stagger but that did not work.

I am fairly sure there is a better way of scrolling elements left and right than I am currently doing with the attached codepen. How do others generally move elements left and right with scrollTrigger?

You need to view the codepen result on an actual mobile device. It looks fine in the chrome dev tools mobile emulator. I've attached a screenshot. The codepen use background-attachment: fixed; for the background images, which works fine on desktop devices but not mobile. Is anyone aware of any fix for mobile or alternative?

setting the `scrub` to a numeric value greater than 1 seems to help my cause.

THank you for the reply @mvaneijgen and I hate to mention this but the opacity animations are not happening now. Do you know why that would be? One other problem I have is that I am really confused by the `start` and `end` properties of scrollTrigger. I end up just vaguely guessing.

You need to scroll right to the end to see the problem. I tried creating a codepen with just the last section but it seemed to work well on its own but in the more complex example like the codepen in this post, the scrollTrigger animation happens way to quickly. What I want to happen is: 1. An image splits in half and moves to the side of the page (I've used divs in this example). 2. I would like a delay to happen before the 2 elements at the side of the page fade out and another div fades in slowly. I have it working the way I want, the problem is, it all happens to fast. I would like a delay between each of the `.to` and `.fromTo` pieces of the timeline but I don't know how to do that. Should I have a separate timeline for each one? let tl = gsap .timeline({ scrollTrigger: { trigger: ".breaking", start: "center 65%", end: "center 51%", scrub: 1 } }) .to(".breaking", { justifyContent: "space-between", ease: "none" }) .to(".breaking .glass", { autoAlpha: 0, ease: "none" }) .fromTo( ".services", { opacity: 0, ease: "none" }, { opacity: 1, ease: "none" } );

I am having trouble with triggering a horizontal = true scrollTrigger. No matter what I do, the left marker is as far left as possible and I cannot find the right marker :). I am trying to pin the elements to either side of he viewport but I am not really understanding the horizontal start and end props.