ericshew Posted April 20, 2020 Share Posted April 20, 2020 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 More sharing options...
PointC Posted April 20, 2020 Share Posted April 20, 2020 I think this thread can help. 2 Link to comment Share on other sites More sharing options...
ericshew Posted April 24, 2020 Author Share Posted April 24, 2020 Thanks for this. I appreciate it. This is a complicated solution and I've learned a lot from it. Link to comment Share on other sites More sharing options...
ericshew Posted April 28, 2020 Author Share Posted April 28, 2020 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 More sharing options...
ZachSaucier Posted April 28, 2020 Share Posted April 28, 2020 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 More sharing options...
ericshew Posted April 28, 2020 Author Share Posted April 28, 2020 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 More sharing options...
ZachSaucier Posted April 28, 2020 Share Posted April 28, 2020 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? 1 Link to comment Share on other sites More sharing options...
ericshew Posted April 28, 2020 Author Share Posted April 28, 2020 It does. Thanks. I was just seeing it the wrong way. I appreciate your help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now