Jump to content
GreenSock

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

Tween and resize animation like http://fff.cmiscm.com

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

Hi,

 

I came across GreenSock whilst trying to figure out how the wonderful Form Follows Function website works (http://fff.cmiscm.com). When you visit that site and click one of the colourful boxes, the box animates by 'wiggling' larger with a kind of skew effect. I wonder if this is something that GreenSock does out of the box, or if it's something that would be difficult to acheive.

 

Basically, any pointers on where to start in reproducing a similar effect would be very much welcome - I have no idea where to start!

 

By the way, I'm so glad I came across GreenSock and it's baffling that I've not come across it before - it looks absolutely awesome!

 

Many thanks folks.

Link to comment
Share on other sites

Doh! The title should be 'Skew and resize' not 'Tween and resize. I'm pretty sure it's not a tween.

Link to comment
Share on other sites

I believe that most of what you see on that [amazing] site uses canvas. You can definitely use GSAP to tween virtually anything including canvas-based objects, but if you're talking about that effect where each corner of a rectangle individually (and sequentially) animates to a new position, that is only possible with drawing things on canvas (as far as I know). It isn't as though you can do that directly to a dom object.

 

However, you CAN skew things and rotate them in 3D with GSAP. You just can't do each individual corner like that. To skew, simply animate the skewX or skewY properties, like TweenLite.to(element, 2, {css:{skewX:40}, ease:Elastic.easeOut}) or you could rotate in 3D (as long as the browser supports that) like TweenLite.to(element, 3, {css:{rotationX:360}, ease:Back.easeOut});

 

Does that answer your question?

Link to comment
Share on other sites

Thanks, that is really helpful. That is indeed the animation I'm talking about.

 

When I inspect the DOM though I can't see any canvas there at all - it just seems to be a div with a background colour and image (the text is the image). Even when it animates there doesn't seem to be any canvas injected in.

 

I trust you know the boundaries of GreenSock and the technology in general :) so I just need to try to fathom how on earth that guy has done this! (You know that time when you think you're a decent front end developer then somebody does something I it's a whole new world of awesome...)

Link to comment
Share on other sites

While most of the real crazy stuff on that site is done in canvas, the effect you referred to seems to be done with a matrix3d css transform.

 

As I understand it:

* Set 4 'points' at the corners of the small box

* Create 4 staggered tweens to move each corner out to create the larger box

* On each update, calculate and apply the 3d transform matrix (not trivial!!!) that makes the box conform to the corner positions

 

Check out http://www.eleqtriq....ransformations/ (webkit only). It has a really powerful demo to try out a matrix3d and see just how complicated it can get... (view the demo just above the "Wait — this is a 4 x 4 matrix. Wouldn't be a 3 x 3 matrix enough?" title)

  • Like 3
Link to comment
Share on other sites

I just saw a tweet that the developer, jongmin, of fff posted regarding this effect. Check this out

https://github.com/edankwan/PerspectiveTransform.js

 

Looks like it would be quite easy to tween those values (at first glance).

 

Follow @cmiscm for more wisdom.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Very nice, ajgagnon. What a nice way to introduce yourself to the forums. Welcome aboard!

 

I totally forgot about that effect.

Love that you integrated with TimelineLite. 

Just tweeted it out our followers.

 

- Carl

Link to comment
Share on other sites

Glad you like it! PerspectiveTransform is a nifty little plugin!

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