Jump to content
Search Community

toggle animation?

Virtous 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

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.

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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');

});
Link to comment
Share on other sites

  • 2 years later...

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...

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...