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.

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?

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.

Simple conversion (fork) of @mikel 's demo above to GSAP 3: This may be somewhat of a trivial post to add. But since I'm new here, I thought I would try to adopt a practice of sharing as I learn. That way I'm not all take, take, take. Maybe this will make it that much easier for some other newb like me, though the Migration Guide is plenty helpful already. Only changes are naming/syntax edits in the javascript and replacing the TweenMax resource with GSAP 3. Please feel free to inform me of corrections. Thank you! Seems to still work though. ? https://codepen.io/jcparris/pen/gOWbrer

@akapowl, Thank you! That makes perfect sense. And yes, I definitely am working with GSAP 3 as I apply what I'm learning from you all. So thank you also for pointing me to the GSAP 3 Migration Guide. Zack said I would dig this place, and he's right. Thank you for sharing what you know! P.S. - I thought maybe that just placing @ in front of a username in these forums might create the proper tagging. But I don't see that in my address to akapowl above. How do I do that? ***Edit: Fixed tagging above after tip from akapowl. Thank you ***

This is really cool! On a side note, though, I noticed that the menu only rotates the first time it closes, which I don't think is intended. Does a rotational value need to be reevaluated or reset somewhere?

Hey, that's exactly what I was after. Works whether the window is landscape or portrait! Thanks, Jack. Man, can't believe how fast I got a solution. Really, I can't thank you enough!??

Hello, I'm new to GSAP and ScrollTrigger, so a bit unsure how to manipulate the pin spacer height. I want to make use of the Image Comparison concept as demonstrated here: https://codepen.io/GreenSock/full/oNjgEjm. However, I want to use it on a page with other sections (that make use of other GSAP effects). The problem that I'm having on mobile is that significant extra space gets added by the pin spacer (top and bottom) when mobile and tablet views are portrait (or whenever the browser window is taller than it is wide). It's not as easy to see what is going on in the original demo because all the background area above and below the image is black. So I modified the demo, adding colored sections top and bottom to make the issue easier to see here (please squash the browser window horizontally to see the problem) : https://codepen.io/jcparris/full/ZEeXoWL. In landscape view, you should see that the image top and bottom meet the colored sections without any black space. Yet in portrait view there is significant black space in-between sections (see image below). Can some one point me towards the solution? I think it might be solved using a ratio but not sure what parameter to feed the ratio into. Thanks!