Inline styles with from -> reverse and wait for reverse to begin new timeline

[Ro1]

Hey there folks,

 

Well done on this library, I love it!

 

There are a few things I can't get to work:

 

1. I have a few timeline.from's . When I reverse this timeline, the inline styles remain, even when I add the property   clearProps: "all"  in the timeline.from statement, is there a solution to this?

 

2. Is it possible for a new timeline to wait till the (old) timeline.reserve() is completed?

 

 

Thanks!

 

[Rodrigo]

Hi and welcome to the forums.

 

It would be very helpful if you could set up a live sample like a fiddle or codepen with the part of your code that's giving you problems, in order to see what could be the issue. If you wish you can fork this one:

 

See the Pen vztpn by rhernando (@rhernando) on CodePen

 

As you can see is a simple timeline with a from instance and I'm not seeing any problems in it. The div element goes from a position and opacity change to the original state setted by the CSS markup and then it reverses to the state setted by the from instance.

 

As for the second question the best way would be callbacks, in this case onReverseComplete. You add the callback in the "old" timeline and you create the "new paused" and when the old reverse is completed you call a function that starts the new, like this:
 

var oldTL = new TimelineMax({onReverseComplete:oldReverseComplete}),
    newTL = new TimelineMax({paused:true});

function oldReverseComplete()
{
    newTL.play();
}

Check the "special properties" in the API reference to see all the alternatives that exists.

 

Hope this helps,

Cheers,

Rodrigo.

[Ro1]

Hi Rodrigo,
 
I added 'clearProps: "all"' to your fork and saved it (

See the Pen IKyvH by anon (@anon) on CodePen

). When you play the timeline, the inline styles are deleted. But if you reverse the timeline, the inline styles remain(!) (inspect the element, you'll see).
 

See the Pen jqEfx by Ro1 (@Ro1) on CodePen

 
This codepen I can't get to work It has something to do with the function hashClick, because when I comment out the function, alert gets fired, else not. On my site it works like a charm.
 
But as you can see in that code, I now check if there's an active element, if so, animate it out of screen, set css to zero again and hide it. (could do the css -> 0 with clearProps)
 
The clicked button:
-checks what position the textbox element has and animate it with tl.from (bottom 0, animate from down, left 0? animate from left, right 0? animate from right)
-set display to block (show())
 
If I just can do an ANIMATE FROM, and when you click another button REVERSE that animation and then start the NEW animation, my code will be nicer, less bulky and I don't have to check for active element.
Now you see 1 type of animation. On the actual page there's another type of animation so the code will be sort of doubled.
 
The problem is, if I animate FROM, then on reverse the inline style props don't get deleted and the check for where to start the animatin from doesn't work anymore (if an element is animated, the e.g. prop LEFT remains -(value of width).
 
even with clearProps : "left, bottom, right"!! It seems that it doens't affect the reverse()
onReverseComplete : function() { $elm.removeAttr('style'); } should do the trick I guess.
 
 
About the paused Timeline. The function will be called multiple times when someone reads all textboxes. oldTL and newTL won't work then, unless I keep track which TL is last used and switch to the other one for a new Timeline.

 
As I wrote this down, I realised it's a bit messy to read/understand. I hope you do and give me your best idea about it. As I said. It works. Only I think it could be better/cleaner.

 

 

Also I'm very open to comments if my approach could be better.
 
 
Thanks in advance!
 
Cheers,
 
Rowan

[Rodrigo]

Hi Rowan,

 

Sorry I completely misunderstood the question in the first place and thanks for providing the codepen it was very helpful.

 

First there were some errors on your pen, in line 35 you have an extra bracket and you didn't defined the speed factor of the tweens, meaning the time. With that solved the animation works if you hide your elements in your from tweens, adding an opacity:0 call, like this:

if ( parseInt($elm2.css('left'), 10) == 0)
{
	tl.from($elm2, speed, { left : -$elm2.outerWidth(), opacity:0 });
}

else if ( parseInt($elm2.css('bottom'), 10) == 0)
	{
	   tl.from($elm2, speed, { bottom : -$elm2.outerHeight(), opacity:0 });
	}

else if ( parseInt($elm2.css('right'), 10) == 0)
{
	tl.from($elm2, speed, { right : -$elm2.outerWidth(), opacity:0 }); 
}

You can see it working here:

See the Pen yeFxD by rhernando (@rhernando) on CodePen

 

Hope this helps,

Cheers,

Rodrigo.

[Ro1]

Ahh, copy and paste going wrong, totally didn't see it, thanks.

With the code in order, my code works, it does also on the site. And I don't need the opacity.

 

I think you still misunderstood. (I DO appreciate your help/effort tho )

I want to, when you click an option:

 

- use the last reverse, so that no matter what animation was before, it will be undone (not writng specific lines for them and;

- the new animation follows WHEN the reverse is done.

 

Is it possible with one Timeline variable?

 

like:

 

1. animation

2. click other option

3. reverse animation

4. empty timeline

5. begin new animation

 

The cleaning the inline styles for detection I can do with onReverseComplete.

 

 

AS I WROTE THIS DOWN I REALISED:

I think just doing

 

var tl = new TimelineMax({

  onReverseComplete : function() { tl = new TimelineMax(); }

});

 

whould do the trick for using one variable and make the only last animation reversable.

Not tested yet, gonna try it tomorrow or so.

 

 

 

Cheers,

Rowan