Jump to content

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

3D shapes with CSS and GreenSock

Recommended Posts

I'm trying to experiment with these 3D shapes I've created and using simple animations in GreenSock. I reckon I've made a good start, but I have a feeling this can be improved. For instance, while I was able to recreate the box (albeit one side doesn't seem visible with the rest of the box), I don't think I've gotten the hang of the circle. I can't really thicken the white fill colour without widening the gaps of the front and back blue sides.


I've noticed using the scale tween property distorts the shapes instead of rotating them, so I had to use the rotation tween property instead. Am I doing something wrong, or is that a real limitation when tweening transformed objects?


Any suggestions and advice would be greatly appreciated.

See the Pen poegxOG by DavidRizzo (@DavidRizzo) on CodePen

Link to comment
Share on other sites

Hey there!

This looks like a fun project. 

First things first: You're using old TweenLite syntax here -If you're starting out learning GSAP We definitely recommend that you learn and use GSAP 3.

This all looks good to me though! I'm not sure what you'd like help with?

in terms of the scale property - it makes shapes bigger or smaller (scales them) - it doesn't rotate them - so you're right to use rotate for this.

  • Like 1
Link to comment
Share on other sites

Hi there, thanks for the response, I appreciate the confirmation about my decision to use rotation instead of scaling.


My only query - and I realise this might be more of a CSS issue rather than a GSAP one - is rendering the circle shape so the white fill has a bit of width. I want to make it similar to a coin, but at the moment, the div container holding the white fill colour is too thin.

Link to comment
Share on other sites

  • 1 month later...

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.