ryan_labar

The example you're referencing is using observer. I think you'd be better off using this example as a starting point: https://codepen.io/GreenSock/pen/MWKzBwG

Definitely rough, but checkout my fork of your pen. I think this can/should be done in a single gsap timeline with just one scrollTrigger instance per card... You'll definitely want to tweak the math/timing to fit your needs but it's a working example: https://codepen.io/ryan_labar/pen/zYemMpv?editors=0010

You'll likely want to do this with transforms on the inner text layer with overflow: hidden (instead of scroll), and adding those to the tween (as a timeline). This way you can control how the user moves through the data. With a traditional scrollbar, as you have in the current version, it's really tough to control the inner scroll, as I'm sure you found out.

For this, you'll want to set a baseline pixels per second, then divide that, depending on the height of the text blocks vs your baseline px/s value. Let's say you want a baseline of 100px/s and the height of your text block is 560px, your tween object would look something like this: const speedBase = 100; // pixels per secons gsap.to('.text-block', { yPercent: -100, duration: (i, el) => gsap.getProperty(el, 'height') / speedBase, // element's height / speed }

This definitely makes things quite a bit trickier, as, if you're using the modifiers plugin, like the demo is using, you'll have an un-even amount of elements. Another approach for this would be to measure the screen-height, and compare that to the height of the the entire text block, then use JS to clone that text block X amount of times so that one of the blocks is fully, vertically off the screen (you'll need to do this math/cloning every time you filter, unless you want gaps in the text). Then you'd just need to vertically animate each of the text blocks (the original and cloned) yPercent: -100, ease: 'none' repeat: -1. For the special styling of the center item, I've not fully thought this through, but you'll likely need to watch each text element's offset in comparison to the window, and animate them based on that. I unfortunately don't have the time ATM to setup a demo for you, but hopefully this gets you pointed in the right direction.

With this you are setting the entire block of text to opacity: 0 and never setting the block back to opacity: 1. You could just add autoAlpha: 0 in the from part of the fromTo object, and that should do it.: gsap.set(split.chars, { transformOrigin: "center -160px", z: 0.1, } split.chars.forEach((char, i) => { tl2.fromTo(char, { autoAlpha: 0, rotation: ((Math.random() < 0.5) ? 90 : -90) }, { rotation: 0, autoAlpha: 1, duration: 2.4, ease:'elastic.out', }, 0.3 + i * 0.06); } This is, however, a reason to set the opacity initially with CSS, and that is FOUC. More on that here: https://gsap.com/resources/fouc

They don't quite mirror CSS, but GSAP has a bunch of really nice eases: https://gsap.com/docs/v3/Eases/

This is probably your best starting point for setting up/moving animations into React: https://gsap.com/resources/React

Per the Pricing FAQ's: "If your membership expires, nothing will change on your client websites. Plugins don’t suddenly break. Keep your membership active to maintain access to updates, new tools and bug fixes." More info here: https://gsap.com/pricing/

Are you looking for something like this? https://codepen.io/GreenSock/pen/eYpOZvX Learn more here: https://gsap.com/docs/v3/Plugins/ScrollTrigger/

You could probably do something like this: https://codepen.io/ryan_labar/pen/OJdLMXv

Hi @DhavalV ScrollSmoother is a Club GSAP plugin so you'll need to import that from GSAP's private NPM. More info here: https://gsap.com/pricing/ and here: https://gsap.com/docs/v3/Installation

Hi @mhkey, Have you tried using the new(ish) lvh or (dvh) units to set your height? There's likely be some overlap before you scroll, but I think this may be better than using a body with overflow hidden, in this instance.

I'd wonder if you set a min-height on the ".msg-contain" wrapper, then animate to height: "auto" on change to account for the possibility of multi line options.

@Sgt. Red Pepper Have you tried adding will-change: transform; to the ".msg-wrap" class? This may fix the stuttering if its caused by browser painting.

Without a minimal demo it's tough to tell exactly what's going on in your code, but you'll want to call a ScrollTrigger.refresh(); every time your page size changes/finishes changing.

Hi @gringo_pablo You need to call the ScrollTrigger.refresh() after the layout is changed so it can make the proper adjustments: btns[0].addEventListener("click", () => { section1.style.display = "block"; section2.style.display = "none"; ScrollTrigger.refresh(); }); btns[1].addEventListener("click", () => { section1.style.display = "none"; section2.style.display = "block"; ScrollTrigger.refresh(); });

Sounds great! I'd be shocked if the paint "bug" was due to any sort of dependencies.

Fair enough on the whisky, but now I'm wondering what could be causing your bug... Ping this thread when you have a something working to show the issue... Browsers usually don't go off the rails (the exception being Safari) these days, so I'm sure it's something simple that's being overlooked, or could use a fresh set of eyes... Can this be reproduced with divs and a quick class toggle in CodePen?

No need for the whole back story, this should do it... Have you tried this with transforms (transform: translateX(100%); etc.) instead of positive and negative left values (browsers don't like repainting position values, and this can cause some visual bugs sometimes, but they do handle transforms nicely)? Also, do you have a width and max-width set on the overflow: hidden; container? One other thing you could try is the old trick of adding backface-visibility: hidden, or the newer, and more reliable, trick of will-change (https://developer.mozilla.org/en-US/docs/Web/CSS/will-change). I usually use will-change: transform;, but will-change: scroll-position; sounds interesting in this instance. Did I win the Whisky? Honestly, mostly just shooting in the dark over here, but if I had a working link or demo that showed the bug, I'm fairly sure I could help solve your issue.

I think your best bet for this would be to create a loop for each section, and set the start and end values for each section, then use toggleClass or onEnter/onEnterBack callbacks to update the classes. https://greensock.com/docs/v3/Plugins/ScrollTrigger

Thanks for the warm welcome, Carl! That worked like a charm. I thought that had something to do with it, but was starting to pull my hair out trying to find a solution! Thanks for the timely response, and great fix! Jonathan: even with the var(s) added it's was still broken for me. It's a good reminder to always add those in there. Thanks for your responses!

Hi Jonathan, That doesn't seem to be fixing the issue... wait 3 seconds before hitting the .grow button. The #zero doesn't morph into #fifty, but if you click .grow right away (on page load), it works as intended.

The issue is when you click the "Grow" button within one or so seconds it morphs to "50%" just fine, but if you wait it wont morph up to 50%, but rather statically jump.

I'm using morphSVG to change the shape of an SVG that is already using the morph function. It works as expected if you click the trigger "Grow" button with in the first second or so of the animation, but breaks (won't morph) after that that. I'm relatively new to GSAP, so I'm hoping I'm not missing anything too obvious. I'm not sure what's causing this. Any thoughts? http://codepen.io/ryan_labar/pen/gaEEGR Thanks!