ScrollTrigger return to percentage based value

[MaxHere]

I'm animating the width of an element on scroll. The element should animate from 100% to 5% on scroll down, and the inverse on scroll up. However if the user resizes the browser, the animation does not return to 100% when scrolling back to the start.

 

Steps to replicate:

- open codepen demo in a narrow browser widow

- scroll the page - red bar should animate

- make the browser wider and scroll back up

result: the red bar animates to ~100% then jumps to the initial width set in pixels.

 

I'd like to keep the inline style set in % or remove the inline style when returning to the start of the timeline.

 

I've tried setting clearProps: "width" in the timeline, but that will clear the props at the end of the timeline as well as the start.

 

See the Pen ZELyqKr by violetoffice (@violetoffice) on CodePen

[GreenSock]

4 hours ago, MaxHere said:

I've tried setting clearProps: "width" in the timeline, but that will clear the props at the end of the timeline as well as the start.

 

No, that happens at the end. 

 

You can just put this in your onReverseComplete: 

gsap.set(wordmark, {clearProps: "width"});

Does that give you the effect you want? 

 

The reason this happens, by the way, is because GSAP gets the original starting value from the browser, and the browser reports computed values in "px" units, thus when GSAP reverts to the original values they're in px rather than % as you may have been expecting. It definitely seems like an edge case here. 

[MaxHere]

11 minutes ago, GreenSock said:

You can just put this in your onReverseComplete: 

gsap.set(wordmark, {clearProps: "width"});

Does that give you the effect you want? 

 

Perfect! Looks so obvious now ::) thanks!