Jump to content
Search Community

Position image at transformpoint

jiggy1965 test
Moderator Tag

Go to solution Solved by PointC,

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

I've got a background image of 600x500. I wish to position that in a 300x250 area. The bottom of the image should be aligned to the bottom of the 300x250 area and then horizontal centered. So more or less like this:




After that I would zoom the green rectangle towards the red rectangle from its 50%/100% transform point. But how to I position it bottom aligned and centered at the first place?


Link to comment
Share on other sites

It's a background image. Managed to create a simple demo:


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


There is a 300x250 rectangle div and in that a 600x500 image of Lady Gaga. Which starts at coordinates 0,0 of the 300x250 rectangle. However Gaga should align at bottom of the 300x250 rectangle and then centered to that. 


What I'm trying to achieve is that the starts centered and to the bottom of the 300x250 div and then zooms out while staying aligned center-bottom until Gaga is also 300x250. That part I get, by using a 50-100% transformpoint and using scale. But first she would have to start centered-bottom of the 300x250 to begin with. 


How can I do that?

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