Get end value or "live-value" while tweening w/ GSAP3

[s94QREspJB]

Hi guys,

 

I am currently working on an accordion which, on click on an element, animates it from height: 0 to height: auto with GSAP 3. Height: auto is required as the content is quite dynamic. Additionally, the currently clicked item has to scroll to the top of the page. This works nicely overall but since the content is so dynamic, there are elements which are not long enough to be able to scroll to the top of the page but just by the amount of their respective height.

I came across the idea to insert a <div> between the accordion and its sibling, the footer, which stretches in its height accordingly to extend the scrollable area. This would mean to pull the height in a kinda real-time fashion from the currently opening element OR know the height its giong to be before the animation starts and pass it to the div-animation. I found something in the forum which points in a direction but its now 5 years old and I was wondering if there is something similar in GSAP 3. I am working with Vue.js v.2.6.11 and GSAP 3.5.1.

Here's the link of the forum:

Also, if anyone has another way how to approach this I am happy to hear!

Thank you guys in advance and happy new year to y'all!

[ZachSaucier]

Hey super.asdf and welcome to the GreenSock forums.

 

It's pretty hard to have an understand of what's happening, let alone what's going wrong, based on your description. Can you please provide a minimal demo using something like CodePen? Usually it's best to recreate the issue from the ground up.