Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mi_cky

Endless folding square

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello Greensockers,

Here's another gifani-inspired greensock animation

 

The animations of the triangle are identical in the "use" copies.

 

I tried to slightly modify the animation of the copies. But the code only partially works. (in the code after / * this -> * /)

 

Attached gif animation shows what the result should look like.

 

Is my approach a possible way? Or do I have to animate all triangles individually?

 

Please leave your two cents :)

 

square-ani1.gif

 

See the Pen YELwpb by mi_cky (@mi_cky) on CodePen

Link to comment
Share on other sites

Is this what you're looking for? 

 

See the Pen POeOQV by GreenSock (@GreenSock) on CodePen

 

I took a few liberties, like randomizing the hue/saturation, filling the viewport, etc. I couldn't help myself. ;)

 

Does that answer your question or at least get you going in the right direction? 

  • Like 5
Link to comment
Share on other sites

Oh, by the way, one of the problems with your original codepen was that you had complex transforms defined like:

transform="translate (0,400) rotate (270,0,0)"

 

GSAP can parse matrix() or translate() values, but not the complex ones with rotate() mixed in there. It'd just take too many kb to add all that logic and it's VERY rare that it's even useful. I converted the complex values into standard matrix() ones instead. I also got rid of the <use> elements since those can be a little finicky in certain browsers. 

  • Like 1
Link to comment
Share on other sites

On 11/22/2017 at 10:03 PM, GreenSock said:

Oh, by the way, one of the problems with your original codepen was that you had complex transforms defined like:


transform="translate (0,400) rotate (270,0,0)"

 

GSAP can parse matrix() or translate() values, but not the complex ones with rotate() mixed in there. It'd just take too many kb to add all that logic and it's VERY rare that it's even useful. I converted the complex values into standard matrix() ones instead. 

 

I never knew that. Couldn't you call .consolidate() to get the matrix?

element.transform.baseVal.consolidate();

 

 

Link to comment
Share on other sites

Great idea, Blake. I wasn't even aware of that method. I'll have to experiment with that. 

Link to comment
Share on other sites

Hello Jack,

 

wow, "a best practice" by Mr. GREENSOCK himself.
Thanks for the demo and yes - that will make me a better coder - hopefully :)

I changed the code slightly for my needs - just two colors - and in my humble opinion an outline improves the seams and the outward looking corners.

 

See the Pen aVRNRa by mi_cky (@mi_cky) on CodePen

 

  • Like 3
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.
×