Jump to content
Search Community

making a child div animate to fill the entire scree

ericshew test
Moderator Tag

Recommended Posts

Hi there,

 

I'm running into a challenge with animating a div scale up to fill the entire window. The initial placement of the child div will vary and is based on the size of a parent. The problem I'm running into is that the placement of the expanded child is based on the parent.  Is it possible to smoothly expand without being bound in this way? Thank in advance for your help.

See the Pen BaoLwQY?editors=1111 by ericshew (@ericshew) on CodePen

Link to comment
Share on other sites

Again, thanks for sending me this. I have one last question. On this codepen, there's a line:

 

  TweenLite.set(clone, from);  

 

I'm looking in the documentation for gsap 2 and can't find anything about a set command without a parameter. Can you let me know what this line does? Thanks in advance.

Link to comment
Share on other sites

7 hours ago, ericshew said:

I'm looking in the documentation for gsap 2 and can't find anything about a set command without a parameter. Can you let me know what this line does?

That line that you show has 2 parameters, I'm confused by what you mean in saying it doesn't have a parameter.

 

The first parameter is the target, in this case clone, which is a reference to an element. The second parameter is the vars, which in this case is from which is a reference to an object.

 

We highly recommend upgrading to GSAP 3 which has a smaller file size, sleeker API, and a bunch of new features. It should be pretty easy to migrate that pen to GSAP 3's format.

 

Let us know if you have any additional questions!

Link to comment
Share on other sites

Actually, I have upgraded to GSAP 3 but the codepen I'm using seems to be using GSAP 2. I'm still unclear what the second parameter is.  I'm quoting your line below that confuses me and I haven't seen this pattern in the documentation. Does this mean that the attributes from the second parameter are copied to the first? I'm just trying to figure out what this line does. Thanks in advance.

 

The second parameter is the vars, which in this case is from which is a reference to an object.

Link to comment
Share on other sites

Maybe it will help if I show the relevant lines next to each other?

 

// This function returns an object with top, left, width, and height properties
function calculatePosition(element) {
  // ...
    
  return {
    top: Math.round(rect.top + scrollTop - clientTop),
    left: Math.round(rect.left + scrollLeft - clientLeft),
    height: rect.height,
    width: rect.width,
  };
}

var from = calculatePosition(fromHero); // This gets the object from calculatePosition

TweenLite.set(clone, from);  // This uses the object above as the second parameter

Does that help?

  • Like 1
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.
×
×
  • Create New...