The Gsap animation wont work
<body>
<div id="landingpage">
<embed id="landingSVG" src="assets/laptopLanding.svg" type="image/svg+xml"/>
<div id="homepage" > </div>
<div id="more"> </div>
<script src="script.js"></script>
</body>
this a embedded svg file I want to scale it up on scroll why is this code not working
import { gsap } from "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js";
import { ScrollTrigger } from "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js";
gsap.registerPlugin(ScrollTrigger);
window.onload = () => {
const tl = gsap.timeline({
scrollTrigger: {
trigger: "#landingpage",
pin: true,
start: "top top",
end: "+=100%",
scrub: true,
}
});
tl.to("#landingSVG", {
scale: 2,
ease: "none"
});
};
also if it works it will zoom in on the center tell me a way to zoom in on a particular part of this svg