Random reveal

[cookingsherri 1 Likes (Newbie)]

I have created an SVG that will cover an image. I want each polygon to randomly disappear. I have managed to get the classes to randomly disappear, but I don't know how to target the individual polygons. How would I do that? I thought of nth-of-type, but I am not sure how to get it to work. Any ideas?

 

See the Pen xxJmjEr by cookingsherri (@cookingsherri) on CodePen

[Carl 11,094 Likes (Superhero)]

welcome to the GreenSock forums.

thank you for the minimal demo.

 

I don't think you can target unique instances of objects that repeat in a pattern like that.

With what you have I think this is the easiest way to randomize it a bit

 

See the Pen rNrgBqm?editors=0110 by snorkltv (@snorkltv) on CodePen

 

The only option I know is to programatically create the grid so that each polygon is it's own entity in the svg.

 

There's a chance I'm wrong, and if so, I welcome other ideas.

[elegantseagulls 1,409 Likes (Superhero)]

2 hours ago, cookingsherri said:

Any ideas?

@Carl is correct, you cannot target individual pieces of a pattern. Also, if you are animating pieces of SVG patterns, the performance is really really bad (from personal experience).

[elegantseagulls 1,409 Likes (Superhero)]

Your best bet is to create the SVG polygons not inside a pattern (it will be more markup, but will be much more performant). If you need to do this for different sizes, you'll just want to dynamically generate the SVG and the polygons based on size of container.

[Carl 11,094 Likes (Superhero)]

being that I just did a lesson on cloning groups in my SVG Animation with GreenSock course, I figured I'd take a stab at this.

 

The top-level approach was:

1. take polygons out of pattern in defs
2. wrap them in a group
3. create a loop-inside-a-loop to clone the initial group and place the clones in a grid
4. animate using same technique as above

See the Pen ZEjNvKw?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Hope this helps

[cookingsherri 1 Likes (Newbie)]

This is fantastic! Thank you so much. This is exactly what I wanted to do. 

 

I can't get it working in my project. 

I have added the following :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script src="js/svg-reveal.js"></script>

 

But it isn't working. This is my first time using Greensock. Can you help me?

 

[cookingsherri 1 Likes (Newbie)]

I figured it out. Rookie mistake. When I created my svg-reveal file it was mistakenly inside another file. Doh!

 

[Cassie 5,069 Likes (Superhero)]

Glad you got it sorted!