Jump to content


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

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.