How can I update end position of target element

[Ravi Sirswa]

Hi, I was creating an animation for client, but can't. 
 

Expected behavior:

You can see that I have three red boxes. I just want to increase their heights when they are in the center of screen. I want to link it to scroll.

 

Current problems:

1. It starts well and all the start markers update well, when height is increased.

2. But end trigger remains at the initial position.

 

Here's demo:

https://stackblitz.com/edit/stackblitz-starters-bd8qkk?description=Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine&file=src%2FApp.jsx&title=node.new Starter

 

see attached image, as you can see end-target 1 should be 200px downwards.

 

[mvaneijgen]

Animating height is something that is not really performant, because it requires a repaint (this is default browser behaviour and GSAP has no influence on it), but some times it's your only option, it is still always better to rethink your approach when you are targeting properties like width, height, margin, padding, top, left, ect, usually there is a better option. 

 

But in this case I would include the height in the end trigger, this way you don't have to update the end marker every time the element grows and they are just baked in on page load. Right now it is just hard coded, but you could also create a variable of your 400px value and use that variable. 

 

Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/stackblitz-starters-nygp6d?description=Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine&file=src%2FApp.jsx&title=node.new Starter

[Ravi Sirswa]

yes, it helpled.