ScrollTrigger - ScrollTrigger not gives correct height to item

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

      })

    })

 

 

 

[GreenSock]

I think you might be misunderstanding what function-based values do. A "to()" tween is like saying "animate to this value", so when you do this: 

 

height: () => Math.round(sliderTimeline.progress().toString() * 100) + '%',

it calls that function when the tween first renders and locks that in as the destination value. So let's say sliderTimeline.progress() is 0.12 at that precise moment (the first time it renders this tween), it's like saying "animate from whatever the height currently is to 12%". So at the very end of that tween, it'll be 12%. 

 

I'm guessing that maybe you wanted height to animate to 100% over the course of the tween? If so, you could simplify it to: 

height: "100%"

But I'm not sure I'm understanding your goal correctly. 

 

It's always much better when you provide a minimal demo (like a CodePen) that illustrates the issue. That'll significantly increase the chances of getting a good answer.