John Wheeler Posted July 10, 2024 Posted July 10, 2024 I am trying to create a heading section where the h1 splits in two sections that I've defined as two spans. On scroll, my intention is to fake a sort of sticky action with the ".faux-sticky-span" element so that the text splits apart to frame another section that I'll be adding later. When I scroll and inspect the faux sticky span, gsap applies a transform: translate inline as expected, but the text doesn't actually move. My hunch is this is maybe a CSS issue relating to some inline display intricacies, but I've tried a bunch of display options and none of them have worked yet. I don't think this is totally relevant because I encounter the same issue in the framework agnostic codepen reproduction, but I am using React (and I'm using the useGSAP() hook in my actual repo). Using MacOS, issue persists on google chrome, safari, and firefox. This is also my first post on a forum ever! Excited to dive into this community and harness the power of GSAP a little more everyday! See the Pen QWXwmNx by John-Wheeler (@John-Wheeler) on CodePen.
Rodrigo Posted July 10, 2024 Posted July 10, 2024 Hi @John Wheeler and welcome to the GSAP Forums! I think you're right about your assessment that this is beyond GSAP and more related to your layout and CSS. I removed all the JS from your demo, created a CSS animation and applied it to the element you want to animate and another one that is outside your demo's container and here is the result: See the Pen MWMYGww by GreenSock (@GreenSock) on CodePen. I'm far from being a CSS expert so I couldn't really advice you in that front and tell you exactly where the issue is ? Finally what I can tell you is that you shouldn't have ScrollTrigger configurations on a Timeline child tween as explained in our learning center: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Right here: tl.to(".faux-sticky-span", { scrollTrigger: { markers: true, trigger: "#hero", start: "top top", end: () => "+=" + window.innerHeight, scrub: 1 }, y: 600 }); Is worth mentioning that as the demo I added in this post, that is not the cause of the element not being animated though. Hopefully this helps somehow, Happy Tweening! 2
John Wheeler Posted July 10, 2024 Author Posted July 10, 2024 Welp. Good catch and sorry that I missed the literal first "common scrolltrigger mistakes" point. I'll keep digging on the css and see if I can find a solution
John Wheeler Posted July 16, 2024 Author Posted July 16, 2024 (edited) If anyone else stumbles upon this, the solution I landed on was to use some classes for variable visibility and absolute positioning to replace a bunch of spans with two h1s, one relative and one wrapped in an absolute div. They are nested like this (sorry for the react sass classes, I know they can be hard to read if you're not used to them) I'll keep digging into why the spans were acting a little funky and will add a solution in here if I figure it out, but for now this works! <header> <h1 className={styles.visuallyHidden}>I'm John and I want to work for You.</h1> <div className={clsx('h1-container', styles.heroH1Container)}> <h1 id="hero-h1" aria-hidden="true" className="hero-h1-static"> <span> I'm <span className="span1">John</span> </span> <span className={styles.transparent}> {' '} and I want to work for You. </span> </h1> <div className={clsx('hero-h1-absolute-container', styles.heroH1AbsoluteContainer)}> <h1 id="hero-h1" aria-hidden="true" className={clsx('hero-h1-absolute', styles.heroH1Absolute)} > <span className={styles.transparent}>I'm John</span> and I want to{' '} <span className="span2">work</span> for <span className="span3">You.</span> </h1> </div> </div> </header> Edited July 16, 2024 by John Wheeler mislabeled h1s as divs 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now