3

I have a group of elements that are masked by a rect in SnapSVG and I want to translate the elements, bringing new ones into view (and hiding ones that are currently in view). The code is really simple - here's a codepen: http://codepen.io/austinclemens/pen/ZbpVmX

As you can see from the pen, box1, which starts outside the mask element (clip) should cross through it when animated, but it never appears. Moreover, box2, which should move out of the clipping area, remains visible.

This example seems to do a similar thing and has no problems: http://svg.dabbles.info/snaptut-masks2

Here's the code from codepen:

var t = Snap('#target')
var clip=t.rect(200,200,200,200).attr({fill:'#fff'})

var box1=t.rect(300,100,50,50).attr({fill:'#000'})
var box2=t.rect(300,300,50,50).attr({fill:'#000'})
var boxgroup=t.group(box1,box2)
boxgroup.attr({mask:clip})

boxgroup.animate({transform:'t100,300'},2000)

I notice that the svg.dabbles examples translates the clip region by 0,0 at one point, but adding something like that doesn't seem to get me anywhere.

AustinC
  • 826
  • 1
  • 8
  • 23

1 Answers1

0

Ok, I figured this out thanks in part to this really great article about SVG transforms: http://sarasoueidan.com/blog/svg-transformations/

The upshot is that when I translate the box group, it takes the mask with it. This is a little confusing to me still - I guess the mask attribute is causing this somehow? Anyways, the solution is to apply an opposite translation to the mask to keep it in place. Check the pen to see it in action but basically I just had to add:

clip.animate({transform:'t-100,-300'},2000)

The tricky part of this is that you now need to synchronize the movement of the mask and the movement of the box group.

edit - I now demonstrate how synchronization can be achieved using snap's set.animate method on the codepen.

AustinC
  • 826
  • 1
  • 8
  • 23