Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ethansisson

Get end value of className tween

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

If I create a className tween...

TweenMax.to(element, 1, {className: '+=expanded'});

...and the new class changes the width of the element, the width will be tweened.

 

Is there a way to get the ending value of the width tween before the tween is complete?

 

For example, the tweened element's original style sets its width to 300px, but the 'expanded' class changes the width to 50%. The element's container is 1500 pixels wide when the tween is created, so the calculated width would be 750 pixels (i.e. 50% of 1500 pixels).

 

It seems TweenMax must have this value at some point otherwise it would not know what to tween the width to, but I don't see any documented way to retrieve it.

 

Thanks,

Ethan

Link to comment
Share on other sites

I'm curious as to why you would want to grab this value from GSAP (if possible) vs just getting the parent's-width*(%/100) ?

Link to comment
Share on other sites

I'm curious as to why you would want to grab this value from GSAP (if possible) vs just getting the parent's-width*(%/100) ?

 

That's a good question. One reason is that if we calculate the width like you propose, the percentage is hardcoded. So if the value changes in the CSS it has to be updated in JS. We try to avoid that kind of dependency because it's difficult to document well and makes maintenance problematic.

 

There are other issues related to modularization of our UI that make that approach undesirable, though those issues are, of course, difficult to justify here without much greater familiarity with our codebase on your part than this conversation is probably worth.

Link to comment
Share on other sites

One reason is that if we calculate the width like you propose, the percentage is hardcoded. So if the value changes in the CSS it has to be updated in JS. We try to avoid that kind of dependency because it's difficult to document well and makes maintenance problematic.

 

But you can evaluate these properties and calculate the value at any point (and at multiple points) ... nothing has to be hard coded. I'm thinking a codepen would be great here so we can get on the same page.

Link to comment
Share on other sites

nice Blake.. back to the future :)

Link to comment
Share on other sites

Pretty cool, huh? No flux capacitor required. GSAP won't render till the next cycle, so it's like it never even happened.

  • Like 2
Link to comment
Share on other sites

That's an elegant solution, Blake. Thank you. I love that, as you said, it's like it never happened. Sometimes using GSAP feels like playing with magic.

 

So far this technique has worked for me without the pause and delay. Have you found that those are specifically needed for some scenarios?

Link to comment
Share on other sites

You can get it before those. I added those just for effect so it wasn't all done by the time the page finished loading.

  • Like 1
Link to comment
Share on other sites

Great solution, Blake.

  • Like 1
Link to comment
Share on other sites

  • 5 years later...

Just stumbled upon this issue today and was wondering if there is another way now that we have GSAP 3? Used this approach and it seems to work but also to trigger the animation 2 times. Here's the particular part within my Vue.js v2.6.11 project:
 

accordionEnter(el, done) {
	if (this.isCurrent) {
	const enter = gsap.fromTo(
		el,
		this.duration,
		{
			height: 0
		},
		{
			height: 'auto'
        }
	)

	// Based on: https://greensock.com/forums/topic/12241-get-end-value-of-classname-tween/
	enter.progress(1)
	// emit to default to animate box to enable scrolling to top
	EventBus.$emit('current-item-height', el.offsetHeight)
	enter.progress(0)
    }
}

// code for elements that are not current follow here...

 

Link to comment
Share on other sites

8 minutes ago, super.asdf said:

Used this approach and it seems to work

That still looks like the best approach. Although in GSAP 3 we recommend including the duration inside of the vars parameter (the toVars in this case). The animation is not triggered twice, the progress is immediately set to the end. You could always create the tween paused initially if you wanted to.

 

One additional thing might be of interest: We're about to release a new Flip plugin that makes transitioning between states (including class name changes) dynamically a breeze. That includes functionality of animating different properties of that state time with different timings and easings as well. It'll be a Shockingly Green or greater Club GreenSock plugin and there's actually a private beta going on right now so join today to get access!

  • Like 1
  • Thanks 1
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.
×