[how does scale and transformOrigin work with each other]

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.

[how does scale and transformOrigin work with each other]

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!

[ScrollTrigger not working as expected, triggers right after the page is loaded not at the time when I scroll to the assigned useRef]

I put an <a> tag for project on the navbar, as I click "project" it will scroll me to the section by its id. I wonder if this function conflicts with scrolltrigger function causing the issue or not.

 

I have a few React components on the top of this project component.

import "./Project.scss"
import ProjectList from "./ProjectList/ProjectList"
import { projectdata } from "./ProjectData.js"
import { useEffect, useRef } from "react";
import { gsap } from "gsap/all";
import { ScrollTrigger } from "gsap/ScrollTrigger"

export default function Project() {

    gsap.registerPlugin(ScrollTrigger);
    const listRef = useRef(null);

    useEffect(() => {
        gsap.fromTo(listRef.current, {
            y: "100%", opacity: 0
        }, {
            y: "0%", opacity: 1, duration: 2,
            scrollTrigger: {
                trigger: listRef.current,
                markers: true,
            },
        });
    })

    return (
        <div className='project' id='project'>
            <h1>Project</h1>
            <ul>
                {projectdata.map((project, index) => (
                    <ProjectList {...project} key={index} ref={listRef} />
                ))}
            </ul>
        </div>
    )
}

 

See the Pen PoJPMoE by anthonyzhang220 (@anthonyzhang220) on CodePen