Animating an SVG pattern that is filled with another pattern.

[Elicrespo]

Hey guys,

 

I have defined a rect pattern made of 6 squares x 6 squares, so 36 making a bigger square. 

Then, I filled other patterns with the same #pattern-1 and placed them to stack on top of each other. 

 

Then I used GSAP to stagger animate the little squares by targeting the rects inside the #pattern-1. Now all the patterns animate at the same time. 

 

What I want to do is delay every other pattern, so the even or the odd ones delayed by a little so they start at different times. I'm having a hard time targeting or selecting the different instances odd or even siblings to animate them separately??

 

Take a look at at the codepen. Also here is the live page: https://photo-spread-gsap-flip.webflow.io/stfall

 

Also, here is the read only Webflow session link if it helps: https://preview.webflow.com/preview/photo-spread-gsap-flip?utm_medium=preview_link&utm_source=designer&utm_content=photo-spread-gsap-flip&preview=3c379c22c75a1399b4b82b1d5fd5bc97&pageId=64dfa480e1ce496bdd07bc8f&workflow=preview

 

 

Thank you

See the Pen NWeWrJq by elicrespo (@elicrespo) on CodePen

[Cassie]

Hey there, thanks for supporting us by getting a membership, hope you're enjoying the tools.

 

I've added a working demo here -

See the Pen abPbYdm?editors=1010 by GreenSock (@GreenSock) on CodePen

At the moment all the blocks animate together, are you trying to target 'green blocks' so that the pattern they're using animate at different times? If so you can't - that's an SVG limitation I'm afraid. If you animate the elements in that pattern it updates everywhere.

 

If that's not what you're trying to do, could you possible rephrase this? 

 

Thanks!

[Elicrespo]

Hi @Cassie, 

 

Thank you for your reply.  So I want to create the effect shown in the screenshot without creating another pattern since It's gonna add another 36 lines of code. Yeah, It makes sense. I guess I'm going to add more lines of code. Thank you