toggle animation?

[Virtous 0 Likes (Newbie)]

Hi there,

 

I'm new to the forums, let me know if this is the wrong place for this topic. 

 

Anyway, I have a navigation menu with a few links, each link has children links. I'm animating the left position of the parent wrapper and the children wrapper.

 

It works fine the first time, but as soon as the timeline has completed I can't redo the same animation...

I want to be able to toggle between the two states.

 

Here is my js

var tl = new TimelineMax();
$('.panel > ul > li > a').on('click', function() {
		
        var pa = $('.panel > ul > li > a');
	var ch = $(this).siblings('ul');

        tl
	.to(pa, .3, {left: '-100%'}, 'left')
	.to(ch, .3, {left: '0%'}, 'left');
});

$('a.return').on('click', function() {
		
	var ch = $(this).closest('ul');
	var pa = $('.panel > ul > li > a');

	tl
	.to(pa, .3, {left: '0%'}, 'right')
	.to(ch, .3, {left: '100%'}, 'right');

});

Any help is appreciated.

 

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the forums,

 

You posted in the ActionScript forum. No worries, I moved your post to JavaScript.

 

It appears you are using the same timeline (tl) for multiple effects on multiple elements. Basically each time you click something you are adding new tweens to the end of an existing timeline, which may or may not be playing when you click. 

 

It would really help if you could create a small demo that we can test and edit using CodePen as explained here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

In general it will probably work better if you have timelines associated with each element that you click. Then you can just play() and reverse() them when needed. Its hard to explain how that my work in your situation though without being able to experiment.

[Carl 9,066 Likes (Superhero)]

Actually, this demo from Rodrigo, might really help with your situation:

http://codepen.io/rhernando/pen/BczGj

[Carl 9,066 Likes (Superhero)]

This is another basic example of giving each element a reference to a timeline to control: http://codepen.io/GreenSock/pen/qmpHK/

[Virtous 0 Likes (Newbie)]

Thank you for those links, appreciate it.

 

Can I do the following?

$('.panel > ul > li > a').on('click', function() {
	var tl = new TimelineMax();	
        var pa = $('.panel > ul > li > a');
	var ch = $(this).siblings('ul');

        tl
	.to(pa, .3, {left: '-100%'}, 'left')
	.to(ch, .3, {left: '0%'}, 'left');
});

$('a.return').on('click', function() {
	var tl = new TimelineMax();	
	var ch = $(this).closest('ul');
	var pa = $('.panel > ul > li > a');

	tl
	.to(pa, .3, {left: '0%'}, 'right')
	.to(ch, .3, {left: '100%'}, 'right');

});

[Carl 9,066 Likes (Superhero)]

From first glance, I don't see why not. Give it a go.

[Gonzalo2683 0 Likes (Newbie)]

Hi, I'm trying to understand the next part of the code published as an example, someone I could explain what happens when you do the following?

//The original post
$("li").each(function(index, element){
  var tl = new TimelineLite({paused:true});
  tl.to(element, 0.2, {width:120, padding:20})
    .to(element, 0.2, {backgroundColor:"#004", color:"orange"}, "-=0.1")
  element.animation = tl;
})

//please explain me, only this part
$("li").each(function(index, element){
//code......
  element.animation = tl; // this, that does this?
})

I can use any property name?

Thanks...