Search the Community

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: 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 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. 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): https://codepen.io/jcparris/pen/YzamgmJ 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: https://codepen.io/jcparris/pen/GRdKrwY 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: https://codepen.io/jcparris/pen/oNdvBZW 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.