Jump to content
Search Community

Faux Sticky Text

John Wheeler
Moderator Tag

Recommended Posts

John Wheeler
Posted

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.

Posted

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!

  • Like 2
John Wheeler
Posted

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 (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 by John Wheeler
mislabeled h1s as divs
  • Thanks 1

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...