Data-lag not working for spans inside h1

[Praneet Dixit]

I want to create a stagger effect using ScrollSmoother. I wrap individual letters of a word inside a span and then apply lag to each of them. This works well. But when I introduce an h1 tag as a wrapper for these spans, this no longer works. Any suggestions?

See the Pen ExEgxJP by PraneetDixit (@PraneetDixit) on CodePen.

[akapowl]

 

Hello @Praneet Dixit

 

This is probably a CSS issue, related to the spans being display: inline by default.

 

As it works 'properly' inside the flex container without the h1 wrapping the spans, one option would be to set the h1 to display: flex too.

 

But probably it would be safer to just set the spans to something like display: inline-block instead.

 

See the Pen RwMGNGy by akapowl (@akapowl) on CodePen.

[Praneet Dixit]

@akapowl can we use another approach for solving this issue? I want to have gradient color for my text and it breaks as soon as I set display: inline-block to span. Same happens when I set display: flex to h1.

See the Pen rNdMaQm by PraneetDixit (@PraneetDixit) on CodePen.

[akapowl]

 

I'm on Windows and I can see the gradient with both approaches just fine in every major browser. My best guess is that you are viewing this on Safari, which does have quite a lot of quirks with regard to scenarios like these ( gradients on text or in general ) if I recall correctly.

 

This really is more of a general CSS / browser related issue and not a problem with regard to GSAP.

 

27 minutes ago, Praneet Dixit said:

can we use another approach for solving this issue?

 

You have to go with however browsers work - and for being able to transform spans (which is what the data-lag essentially does behind the scenes) you will need to change their display property because tranforms don't work on inline elements (unless they are in a flex container apparently).

 

So if you need the gradient text to be working across browsers 100%, you will need to find a setup that allows for that with keeping in mind that you also need transforms to be working on your elements, which I can not work out for you, I'm afraid.

 

Here's a pen just showing that transforms don't work on inline elements.

 

See the Pen dympovr by akapowl (@akapowl) on CodePen.