AnthonyZhang220

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.

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!

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> ) }