Jump to content
Search Community

SVG mask with css clip-path tweened via attrPlugin bound to scroll via scrollMagic works weird in safari

jimthornton test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi gsap people, 


So I'm a bit at a loss. I did a ton of research to find the best "cross compatible" way to reveal a background image on scroll. Basically it works as intended on chrome in the codepen, a more clear example is above the fold to scroll on https://bell.works/work but you can for sure see it in the codepen. 


Just some notes - TLDR maybe

  • using svg injector to load the svg circles except for the clippath SVG mask which is inline
  • i'm using objectBoundingBox for the clipPathUnits, otherwise the size of the circle on load less easily controlled, and then I had to tween the attributes of the SVG mask ellipse to get it sized right so it wouldn't be an oval based on browser width, e.g. 
var relWidth = $("#site-header-area").width();
var relHeight = $("#site-header-area").height();
var $rX = relHeight / relWidth  * 0.5;
TweenMax.set("#circle-mask", { attr: {cx:0.5, cy:0.6, ry: 0.5 * 0.75 , rx: $rX * 0.75 }, transformOrigin:"center center"});	
  • for the live url https://bell.works/work  the mask works like the codepen and intended, but doesn't tween on scroll, BUT if you go to the bottom of the page and back up, it tweens it all open, and then doesn't close it back up like on chrome - does that make sense? it's like there's a big delay in any calculations but it is working, just not bound to scroll


I've read a series of posts about similar issues with solutions that don't really work or help:


I feel like I went down the rabbit hole on this one. Is there something obvious I'm missing? Is there a better way to do this purely with gsap? Should I just quit altogether and make an SVG that looks like a mask with a hole in the middle and then tween the attributes or scale the whole thing on scroll? 

Any help would be greatly appreciated!

See the Pen ppMKqB by jimthornton (@jimthornton) on CodePen

Link to comment
Share on other sites

Thanks, Mikel! Seems like about how much js I should have needed to animate a circle mask opening.


And maybe I should be thinking about the problem differently, like your solution doesn't even use a mask. Maybe there is a way I can cheat the visual effect, without needing the actual mask and unmasking a bunch of items, like tweening their opacity at the same time I expand the circle.,  


I'm also going to have to spend some time with your scroll activated code, more elegant than my solution of using a scroll library and feels smoother!


Will report back!

  • Like 1
Link to comment
Share on other sites

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...