Jump to content


Random reveal

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

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?


Link to comment
Share on other sites

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


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