Hello,
I’m trying to create an animation (or at least, ChatGPT is for me) using GSAP where a logo grows from the bottom of the viewport to fill the top on scroll down, and then continues by shrinking into the top.
That part is working, but in reverse it does the first part right (it grows from the top to the bottom) but then the second part is does the first part in reverse.
Code I’m using is here:
gsap.registerPlugin(ScrollTrigger);
let tl = gsap.timeline({
scrollTrigger: {
trigger: “.logo-container”,
start: “top bottom”,
end: “bottom top”,
scrub: true,
toggleActions: “play reverse play reverse”
}
});
// Step 1: Set up the SVG, initially at the bottom
gsap.set(“.logo-svg”, {
height: “0%”,
position: “fixed”,
bottom: “0”, // Start at the bottom of the screen
width: “100%”,
transformOrigin: “bottom center” // Start growing from bottom to top
});
// Step 2: Grow the logo from bottom to top on scroll down
tl.to(“.logo-svg”, {
height: “100%”,
duration: 1
});
// Step 3: Shrink the logo from bottom to top on scroll down
tl.to(“.logo-svg”, {
height: “0%”,
duration: 1,
top: “0”, // Keep the top fixed
bottom: “auto”, // Shrinks from bottom to top
transformOrigin: “bottom center” // Shrink from bottom to top
});
// Step 4: After collapsing, remove fixed positioning
tl.set(“.logo-svg”, { position: “relative” });
// Step 5: On reverse (scroll up), grow from top to bottom, and shrink from top to bottom
tl.eventCallback(“onReverseComplete”, () => {
gsap.set(“.logo-svg”, {
transformOrigin: “top center”, // Grow from top to bottom on scroll up
bottom: “auto”, // Reset bottom for reverse direction
});
tl.to(“.logo-svg”, {
height: “0%”,
duration: 1,
transformOrigin: “top center”, // Shrink from top to bottom
top: “0”,
bottom: “auto”,
});
});
Any help would be hugely appreciated!
View link is here: https://amy-heycock.webflow.io/
Here is my site Read-Only: [LINK](Webflow - Amy Heycock)
(how to share your site Read-Only link)