Jump to content
Search Community

how does scale and transformOrigin work with each other

AnthonyZhang220 test
Moderator Tag

Recommended Posts

Hi, I'm trying to create a scroll effect for my footer, where it will scale from 1.5 to 1 as I scroll to the bottom of the webpage. I set the trigger to be at the top of my footer section, and the scale animation runs smoothly.

 

However, my footer will not stick to the bottom of the page. I am thinking maybe it is the problem of my setting for transformOrigin, which I set to "50% 100%" hoping that the bottom middle will stay when the whole footer shrinks, but it turns out not working.

 

I don't know how to include react in the CodePen, so I included a minimal example in the Codesandbox here: Demo

 

Any help will be appreciated!

Link to comment
Share on other sites

Hi Anthony,

 

I'm not exactly sure how you are expecting this to look, but I think you just need to adjust your start and end values to get your desired result. I would also not suggest animating any properties on your trigger that might cause the trigger to move, for example scale, height, and y.

 

Also, when running React 18 in strict mode, it's critical to kill anything you create inside an effect as React is going to mount, unmount, and then mount every component. That's why you are seeing 2 sets or markers because it created 2 ScrollTriggers.

 

https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

 

Quote

To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

 

So I would suggest using a wrapper as the trigger, and then if necessary, adjust the start value.

 

https://codesandbox.io/s/muddy-meadow-hbpqlw?file=/src/Footer.jsx

 

  • Like 2
Link to comment
Share on other sites

Thanks for the suggestion on the scrolltrigger part! I think this is also causing part of the problem to my animation so I just changed that part in my code.

 

As to how I expect it to look, you probably noticed in my demo,  though the page has already reached the very bottom, my footer is not touching the bottom of the window, leaving a white blank below the footer. The expected look is without the white blank at the bottom. As you mentioned, I think it could be the issue with the way I use scale. I was thinking that if I use fromTo()  like this: 

 gsap.fromTo(footerRef.current, { scale: 1.5 }, { scale: 1, duration: 1});

it would scale from 1.5 times its size to its original size and position.

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