Jump to content
Search Community

Weird behavior when navigating to a label

helpse 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

Hello, thanks in advance for replying.

 

I am trying to change a Timeline.vars.css property on the fly (changing it on the onStart event).

When I change it without navigating through the timeline (using play or seek) it works.

The problem is when I use play('hide'). Although the onStart event gets called, I'm not being able to change the vars.css property.

 

Here are samples of my code:

function getAnimateOut () {
    tl = new TimelineLite({onStart: onHideFunctions, onStartParams: ["{self}"], onComplete: next});
    // ... here I add some childs
}
onHideFunctions = function (tl) {
	var children = tl.getChildren();

	$.each(children, function (index, child) {
		if (child.vars.marginLeft)
			child.vars.marginLeft = 675.5;
		if (child.vars.css && child.vars.css.marginLeft)
			child.vars.css.marginLeft = 675.5;
console.log('============');
console.log(child.vars.css);
console.log(child.vars.marginLeft);
        }

From my point of view, what's happening is that css properties are inside child.vars.css when I do not use play('hide'), while css properties get into child.vars (i.e. child.vars.marginLeft) when I do use play('hide').

 

This is the console output for the console.logs:

============ (normal behavior, css property effectively gets changed)
undefined
675.5
============ (this is after I do play('hide'). Althought marginLeft property gets changed, it's not what happens on the element
Object {clearProps: "all", marginLeft: 675.5}
undefined
============ 

It's also worth mentioning that this tween is nested inside another:

tween = new TimelineLite();

tween.add(getNavigationTween())
	.add('show')
	.add(getAnimateIn(), 'show')
	.add('hide', '+=5')
	.add(getAnimateOut(), 'hide');

Seems like a strange behavior to me.

 

Please let me know if I'm doing something wrong.

 

Thank you.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

This is an expected behaviour, nothing wrong with it.

 

What happens is that GSAP stores the starting values of the element being animated and the end values of the particular animation for that element. What you're able to see when you get the timeline's children is the timeline object, but changing those values (as you already saw) ultimately doesn't alter the values the engine is using to actually animate the element.

 

For that there's a specific method, updateTo(), that changes the values of that particular instance that resides in the timeline. The only cost for this method is that is a TweenMax specific method, so you need to include TweenMax.min,js (which also has TweenLite and both TimelineLite and TimelineMax in it, as well as some plugins), so you'll have to include that particular instance via the add() method, like this:

var tl = new TimelineLite({/*callbacks here*/}),
    t = TweenMax.to(element, time, {vars, marginLeft:200});

// then add the tween in the specific position
tl.add(t, "label");

// then in a specific callback use the updateTo() method to change the final values of that specific instance
t.updateTo({marginLeft:500}, false);

You can see more about it here:

 

http://api.greensock.com/js/com/greensock/TweenMax.html#updateTo()

 

Another option is that since you're looping through all the timeline's children you might better remove the timeline, create it again with the updated value and then add it at a specific label i the master timeline.

 

Finally please take a look at this post in order to see how you can create a reduced live sample of your issue, it always helps us identify and get a proper solution faster than just looking at some code snippets on the screen:

 

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

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hello Rodrigo.

 

Thank you very much for your reply.

 

I understand this issue is about changing vars.css properties on the fly, and whether TimelineLite allows it or not. For what I see in the documentation, that's the purpose of TweenMax's updateTo method.

 

In my example above, when I did not navigate through the main timeline

tween = new TimelineLite();

tween.add(getNavigationTween())
	.add('show')
	.add(getAnimateIn(), 'show')
	.add('hide', '+=5')
	.add(getAnimateOut(), 'hide');
function getAnimateOut () {
    tl = new TimelineLite({onStart: onHideFunctions, onStartParams: ["{self}"], onComplete: next});
    // ... here I add some childs
}
onHideFunctions = function (tl) {
	var children = tl.getChildren();

	$.each(children, function (index, child) {
		if (child.vars.marginLeft)
			child.vars.marginLeft = 675.5;
		if (child.vars.css && child.vars.css.marginLeft)
			child.vars.css.marginLeft = 675.5;
console.log('============');
console.log(child.vars.css);
console.log(child.vars.marginLeft);
        }

I noticed that child.vars.marginLeft was defined, and the property effectively got changed on the element, while when I used 

tween.play('hide')

child.vars.css.marginLeft was defined, and although this property got changed, the same did not happen on the element.

 

And the reason seems to be simple, when I did not use tween.play('hide'), the onStart method was called before the tween initialized, while when I used tween.play('hide'), the onStart method got called after the tween initialized.

 

That's why in the first scenario, I was able to change the property, while not in the second scenario.

 

So I added a 0.1s gap like this:

tween.add(getNavigationTween())
	.add('show')
	.add(getAnimateIn(), 'show')
	.add('hide', '+=4.9')
	.add(getAnimateOut(), 'hide+=.1');

and now my code works.

 

I understand that the updateTo method is the preferred way to go, but I'm just trying to keep things small, that's why i will try to use TimelineLite only.

 

Let me know if I'm wrong in some of my assumptions, I'm new to GSAP, but I really love this platform.

 

Thank you for your time.

 

Best regards,

Sergio.

Link to comment
Share on other sites

Hi Sergio,

 

Well like I said in my first reply it's quite easier to see what could be the issue with a live reduced sample.

 

There are a few things that could cause that behaviour, one could be an overwrite issue. Another possibility is that in your function you'e creating a live timeline, therefore once the timeline instance is created, it playhed start moving forward. so when the instances are added to it, there's a incredibly small fraction of time that has elapsed, that basically could trigger the onStart callback. But again, is hard to see what the issue could be without seeing and poking around the rest of the code.

 

Finally I've been in this situation of trying to change values on the fly the way you're attempting and believe me, eventually that code will brake. If you restart or reverse the timeline the animation won't reflect those changes. At the end the best way is to kill that particular animation and create it again.

 

Also doing it like that it'd save some code and execution, because you won't have to loop through all the timeline's instances and run those conditional logics, just remove the instances and add new ones with the new values or even better run the function to create the entire timeline again with the new values.

 

Basically I'm speaking from the experience of being in the position you're now, but if that particular code is working for you, then is OK ;)

 

Rodrigo.

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