Jump to content
Search Community

Random reveal

cookingsherri test
Moderator Tag

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

  • 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

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