AINOM

This was probably the BEST advice out of this whole thread so far. I realized after playing with it more, that using a number for the scrub attribute only masked the issue...but implementing smooth scroll (which was not happening with the latest mac Chrome, Firefox or Safari) is the bees knees, and it works perfectly now!!! So happy! This forum is awesome, and now with a successful first foray into the world of GSAP, I am looking forward to doing much more in the future! Thank you so much for taking the time to help. I hope to be able to give back to this community in time.

OMG!!! That's it! Scrub: (number) does it! Thanks so much!

Yes, that does seem to help things! I still have that "stepping" effect between tweens that I'd like to eliminate...any ideas there?

Ha!...Just did that and posted, probably seconds before you posted! See above!

Thanks for the tips...but I believe the non-smooth animation is indeed related to GSAP (at least how it's currently implemented). I've recreate the animation in a codepen here: https://codepen.io/infinitemonkeys/pen/mdWxmgN and without any other CSS transitions or animations it's still not smooth. Another example I'm comparing to is this https://codepen.io/knyttneve/pen/zYrZwVo. What I notice with mine is that when I scroll with the mousewheel it "steps" between different tweens instead of smoothly progressing between them. I've created a screencast to highlight what I mean...this is me scrolling a tiny bit at a time up and down...notice the background image goes from start position and size to the next tween suddenly, not smoothly, Compare that to the Istanbul Codepen demo, where the slightest scrolling up or down is smooth. https://www.dropbox.com/s/17qfyf217ir7v68/Screen Recording 2021-06-03 at 2.16.04 PM.mov?dl=0 How do I also achieve this?

Thanks for the advice! I've re-jigged my code to use the "timeline" structure that you suggested, and also removed the second element (paralllax-2) that was being animated. Overflow:hidden was already applied to the hero wrapper. All this has made a slight difference, although it's not nearly as smooth as almost every other example I've seen

I'm brand new to GSAP and using for the first time for a simple parallax-like effect with 2 objects: a background image (parallax-1) and a DIV with text (parallax-2). Rather than the super-smooth scrolling animation that I've come to expect with GSAP (like with this sample: https://codepen.io/isladjan/pen/abdyPBw) my animation it incredibly "janky": https://intendedimpact.infinitemonkeys.ca/about-us/. I must be missing something simple, but I just can't figure it out. Here's the code I'm using: gsap.to(".parallax-1", { yPercent: 60, ease: "none", scrollTrigger: { trigger: ".parallax-1", start: "top top", end: "bottom top", scrub: true } }); gsap.to(".parallax-1", { scale: 1.15, ease: "circ", scrollTrigger: { trigger: ".parallax-1", start: "top top", end: "bottom top", scrub: true } }); gsap.to(".parallax-2", { yPercent: 30, ease: "none", scrollTrigger: { trigger: ".parallax-1", start: "top top", end: "bottom top", scrub: true } }); Can anyone help me figure out what's missing?