Animating Multiline Knockout Text and Chrome Background-clip Glitch

[Parris]

Hi Everyone,

 

I'm experimenting with animating multiple masks (soft circle and text) over the same image. However, I found a glitch with using -webkit-backgound-clip: text. I was going to ask for help, but now I think I have decent workaround. So I'd like share it. If anyone can provide further insight or code improvements, please do. Thank you.

 

The Problem: This GSAP animation works fine in Firefox but in Chrome it jumps strait from the start to the end with no transition. The same happens with CSS animation, so I don't think the issue is with GSAP. Also, transition value changes cycle normally in the inspector. So the math steps are executing, just not the rendering.

 

The Goal: Animate 3 lines of masked text separately without moving the background, then reveal the image with an "Iris In" effect. For responsive design, the main background image should cover the viewport.  I also don't want the text to be cropped when the browser is resized.

 

Problems/Challenge Specifics:

1. SVG Crops the Text: I couldn't find a way to allow the background image to be cropped left/right in SVG without the text being cropped as well. I tried nesting SVGs, but couldn't get them to work with different preserveAspectRatio settings (like slice and meet). So instead I separated the iris mask and the text mask into overlapping divs (layers). Instead of SVG, I chose background clip for the text to allow the iris mask layer beneath to show, and used padding to keep the text in the viewport when resizing.
2. 2 Mask Divs= 2 Images: I needed two copies of the background image - one for the iris mask and one for the text. And I wanted both images to be aligned so it looks like just one image.
3. The Chrome Animation Glitch: Assigning background clip to the wrapper for the three lines of text seems to be a decent way to make sure they all share the same background image center. But it seems like Chrome can't cope when you start to animate. See below how each line just pops into view rather than fading in and shifting right: 

Pen with the jump glitch (see last pen at bottom of page):

 

Not right. So I tried applying background: inherit to the CSS of each text line. This then allows the animation to work as intended, but now the first and third lines of text (classes row-1 and row-3) have different centers for the background:

Pen with backgrounds not aligned:

See the Pen GRdKrwY by jcparris (@jcparris) on CodePen

 

Better, but I want the background to be seamless. So I shifted 1st and 3rd row text backgrounds explicitly with percentages in background-position.
 

Working Pen:

See the Pen oNdvBZW by jcparris (@jcparris) on CodePen

Ok, it works. If you have time, please let me know what you think.  Much thanks to the devs and all here who post. Studying the docs and forums here has been immensely helpful as I continue my journey with GSAP!

** I edited this post to try and make it shorter and clearer. Sorry that it is still a pretty long read.

See the Pen YzamgmJ by jcparris (@jcparris) on CodePen

[GreenSock]

Sounds like you figured out a solution and also came to the correct conclusion that the issues had nothing to do with GSAP, right? Just double-checking. Thanks for sharing your findings. 

[Parris]

Hi Jack,

Yes, I have a working solution. And Yes, this must not be GSAP because CSS animation does the same freeze. It's gotta be a Chrome thing. Thank you.

 

One thing though, is there a trick I can use to move the first pen above the others? It is placed there in the post editor, but somehow gets moved to the bottom when the post is displayed.

 

As a side note, I think I probably need to figure out where I might report the bug to the Chrome devs. But I don't need to pick your brain for that. Do you need me to mark my own post as the solution?

 

 

[GreenSock]

On 9/1/2022 at 3:28 PM, Parris said:

One thing though, is there a trick I can use to move the first pen above the others? It is placed there in the post editor, but somehow gets moved to the bottom when the post is displayed.

 

The CodePen you entered into the CodePen field when you initially created your topic is the one that'll be at the bottom, sorry. With other ones, you can literally just move the links around in your post wherever you want them. 

 

On 9/1/2022 at 3:28 PM, Parris said:

Do you need me to mark my own post as the solution?

It's up to you. No big deal. It doesn't make a big difference. 

 

Thanks!

[Parris]

I see, thanks. I realize now that I could have just left that field blank and I would have been able to place the pens where I wanted them (without the one at the bottom). I'm guessing that having that pen url in the field meant the same one placed as the first one in the post didn't show up. Makes sense that you wouldn't want duplicates. It must be also that once you make your initial post, you can edit virtually anything in it. But removing the pen from the field at that point does not remove it from the bottom of the post.