[ScrollTrigger - ScrollTrigger not gives correct height to item]

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) + '%',

      })

    })

 

 

 

[ScrollTrigger animation jump]

1 hour ago, GreenSock said:

You want it to start pinning/scaling when the top of the image hits the top of the viewport, and you want it to move to the center of the viewport vertically? 

https://codesandbox.io/s/blockbud-co-landing-forked-r4zx1s?file=/pages/index.js

Thank you so much and also sorry for my complex langugage

[ScrollTrigger animation jump]

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.

 

 

[ScrollTrigger animation jump]

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.

[ScrollTrigger animation jump]

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