Jump to content
Search Community

Is there anything in GSAP help me calculate the transform from element to full screen?

UnrilWever test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

like  thisimage.thumb.png.294803be45d5b5df938c811ab305e1b4.png

 

And I can calculate it in Native code,but i wonder if there's anything in gsap that simplifies the code

 
 
export function amplificationElementTransform(Element: HTMLElement) {
  const bigImg = Element;
  const bigElementStyle = bigImg.getBoundingClientRect();
  const bodyElementStyle = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  };
  const imgCenterPosition = {
    x: getLeft(bigImg) + bigElementStyle.width / 2,
    y: getTop(bigImg) + bigElementStyle.height / 2,
  };
  const bodyCenterPosition = { x: bodyElementStyle.width / 2, y: bodyElementStyle.height / 2 };
 
  const scaleWidth = bodyElementStyle.width / bigElementStyle.width;
  const scaleHeight = bodyElementStyle.height / bigElementStyle.height;
 
  function calculateX(){
    return bodyCenterPosition.x - imgCenterPosition.x;
  }
 
  function calculateY(){
    return bodyCenterPosition.y - imgCenterPosition.y;
  }
 
  function calculateScale(){
    return scaleWidth > scaleHeight ? scaleWidth : scaleHeight;
  }
  const x = calculateX();
 
  const y = calculateY();
 
  const scale = calculateScale();
 
  return {
    x,
    y,
    scale
  };
}
Link to comment
Share on other sites

  • Solution

Are you trying to calculate the transforms necessary to make that element full screen? If so: 

https://greensock.com/docs/v3/Plugins/Flip/static.fit()

 

But if your goal is to have it animate there, you might want to look at a completely different technique known as "FLIP" because it can be SUPER powerful and way easier, plus more responsive.

https://greensock.com/docs/v3/Plugins/Flip

 

For example, you could just capture the state (at the small size), then apply CSS that'd make that element full-screen (maybe even position: fixed) and then let Flip plugin do the animation between those states. If you've never heard of this technique, I'd highly recommend at least reading up on it or watching the video. Once you grasp it, you'll see how incredibly powerful it can be in certain situations. 

 

Good luck!

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