Jump to content
Search Community

After using tween, not able to change css value

jpignati test
Moderator Tag

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

The problem I am seeing is after I do this:

TweenMax.to('#contentsCase.'+sectionArray[currentSection], 1, {autoAlpha:0, left:-1210, onComplete:byeBye, onCompleteScope:currentSection})

I can't change the value of left with jQuery in the onComplete function.

In the function byeBye, I am trying to set the css value of left back to either 'auto' or 'inherit' but it's not changing anything.

Neither of these work, but I can change any other value no problem.

$('#contentsCase.'+sectionArray[currentSection]).css( 'left', 'inherit' );
$('#contentsCase.'+sectionArray[currentSection]).css( 'left', 'auto' );
My other question is if I can tween to an 'auto' or 'inherit' value?
 
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Certainly, there are two ways.

 

First, you could use a set() method in the complete callback. A set() tween acts exactly as a zero duration tween and are great to set specific properties, for example on DOM ready or in callbacks, like you need now. Like this:

TweenMax.to('#contentsCase.'+sectionArray[currentSection], 1, {autoAlpha:0, left:-1210, onComplete:byeBye, onCompleteScope:currentSection})

function currentSection()
{
  TweenLite.set($('#contentsCase.'+sectionArray[currentSection]), {left:"auto"});
}

Another possibility using the set instance is passing the tween as a parameter for the callback and in the callback use the target, it saves some code:

TweenMax.to('#contentsCase.'+sectionArray[currentSection], 1, {autoAlpha:0, left:-1210, onComplete:byeBye, onCompleteScope:currentSection, onCompleteParams:["{self}"]})

// this calls for the specific tween being passed as a parameter
// and therefore the specific element being tweened
function currentSection(tween)
{
  TweenLite.set(tween.target, {left:"auto"});
}

Second, you can use clearProps to eliminate any trace of changes made to that property or every property, for that specific element. Like this:

weenMax.to('#contentsCase.'+sectionArray[currentSection], 1, {autoAlpha:0, left:-1210, onComplete:byeBye, onCompleteScope:currentSection})

// this removes only the left value added by GSAP
function currentSection()
{
  TweenLite.set($('#contentsCase.'+sectionArray[currentSection]), {clearProps:"left"});
}

// this removes all the properties affected by GSAP
function currentSection()
{
  TweenLite.set($('#contentsCase.'+sectionArray[currentSection]), {clearProps:"all"});
}

Also is always good to see the real code working. Please take a look at this post in order to learn how to create a reduced sample in codepen:

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks for your quick response. Here is a simple demo of what I am trying to do:

See the Pen uybdB by jpignati (@jpignati) on CodePen

at the end the green div should have a right:auto value but it does not. I can set the left to auto no problem. I am fairly new to .js so maybe I am missing something.

 

 

UPDATE:

Hey guys, looking at it simplified made me realize that I was not waiting for the correct tween to end before I tried to set the values. So the second tween was overriding the set values. 

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.
×
×
  • Create New...