gsap.registerPlugin(ScrollTrigger);
let tmain = gsap.timeline({
scrollTrigger: {
trigger: ".container-lg",
start: "top top",
end: () => innerHeight * 4,
scrub: true,
pin: ".pinclass",
anticipatePin: 1
}
});
<div class="container-xl justify-content-center h-100 d-flex">
<div id="pinclass" class="pinclass">
<img src="images/test.png" style="width:100%;height:100%;background-size: contain;">
</div>
let say we begin at transformation 8.3 scale.
It works perfectly fine however things get unordered when I am scrolling and it is zooming out ,
here is how it was looking
<div id="pinclass" class="pinclass"
style="transform: scale(8.3333, 8.3333);
left: 262.141px; top: 150.001px;
margin: 0px; max-width: 1387px;
width: 1387px; max-height: 833px;
height: 833px; padding: 0px;
box-sizing: border-box; position: fixed;">
however now when we are at transformation scale 6.3 or 7.3 or somewhere in the middle, I chose to resize the window
and in my plugin registration, i specified the start as "top top" but the moment i resized it, now it exactly act like setting of start: "bottom bottom"
I tried to fix this behaviour by setting javascript the above mentioned '.pinclass' but still it has no effect on it. it still snaps to "bottom bottom", despite "top top".
Sorry unable to attach images due to size restriction.
Unable to decided if it is a bug or my bad practice of using it.
Thanksmyzip.zipmyzip.zipmyzip.zipmyzip.zip
