schwarzsky

I have a item that animates when the item in viewport. I get progress via `timeline.progress()` but gives the wrong height while animating. Logging in onUpdate gives correct but when i see styles i see `37.5...%`. let sliderTimeline = gsap.timeline({ scrollTrigger: { trigger: '.slider', scrub: true, start: 'top center', end: 'bottom center', markers: true, id: 'slideranim', }, onUpdate: () => { console.log( Math.round(sliderTimeline.progress().toString() * 100) + '%' ) }, }) sliderTimeline.to('.innerSlider', { height: () => Math.round(sliderTimeline.progress().toString() * 100) + '%', }) })

Thank you so much and also sorry for my complex langugage

By `.image`, i mean the div with the `.image` class. Your codesandbox explains how to center an item but i can't figure out how to do it for existing div. I wanted to center object when animation is going on. Thanks for the help! I created a new demo in case you guys wanna look. https://codesandbox.io/s/9v134x In this one, object pins correctly into screen but i still can't figure out how to center it into screen.

Thanks to both of you guys! It worked. I have an another question too, like you can see in `.image` animation i am pinning object to screen. But i want to position object smoothly in center of the screen, stay like that a 100-200px and stay in last position (end state). But i don't know how to position object smoothly in center of the secreen, how i can accomphlish this kinda effect? By smoothly, i mean like editing y position smoothly in GSAP.

Hello, Like you can see, Product Image Placeholder is jumping when animation started. Still trying to figure out but can't find a way how to solve it. Demo: https://codesandbox.io/s/whdnt2