Jump to content
GreenSock

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

Looking for Easiest Way to Make Project Scale as a Whole

Recommended Posts

Can anyone point me to a tutorial or codepen demo that shows how to make an entire Greensock project in a div scale uniformly on a resize or load event, preserving aspect ratio and relative positions of all elements within a container div?

 

I've used Greensock within Edge Animate, and it works well.  However, when building a GSAP project from scratch within a container div on a web page, nested elements do not scale with the parent container.  I'm looking for the most efficient approach for achieving this. 

Link to comment
Share on other sites

If you give the parent container a width and height, there should be no issues scaling it (& therefore, its contents).

Link to comment
Share on other sites

Hello TomW, and Welcome to the GreenSock Forum!

 

When scaling an element or an element with nested children, you just scale the parent or main containing element. Animating the scale property in your tween. Just make sure you have the CSS position absolute or relative on that element.

 

I'm sure if we see an example of your code we can see why your elements children are not scaling. But without seeing some code for context it will be hard to see what your seeing.

 

Here is a video tut by GreenSock on how to create a codepen demo example.

 

 

This way we can see your code in context to better assist you.

  • Like 3
Link to comment
Share on other sites

Thanks for the help. I have created a solution based on my research and I'd like to know if you consider this to be as good an approach as any or if there is something I'm doing wrong that could get me into trouble. Click the buttons on the left to move the square from corner to corner.  The whole project proportionally scales with the page. 

 

Is there a better way, or anything I'm missing?  Thanks.

 

See the Pen JGWJxr by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks for the help. I have created a solution based on my research and I'd like to know if you consider this to be as good an approach as any or if there is something I'm doing wrong that could get me into trouble. Click the buttons on the left to move the square from corner to corner.  The whole project proportionally scales with the page. 

 

Is there a better way, or anything I'm missing?  Thanks.

 

See the Pen JGWJxr by anon (@anon) on CodePen

You could just use TweenMax.set instead of TweenMax.to for everything with a duration of 0, since there's no actual animation happening.  

 

Really, I feel like all of the positioning that's not animated could just be done in the CSS.

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