Jump to content
Search Community

loop reverse animation

Nada test
Moderator Tag

Recommended Posts

Hey guys!
I have a problem with reverse function, It reverse all play animation which happened after click.
 

document.addEventListener('DOMContentLoaded', function () {
	var menuitem__click = $('.submenu__item'),
	$document = $(document),
	action__zone = $('.action__zone'),
	counter = false,
	counter_uniqe = false,
	$click = $('.click'),
	menu_tween_1= new TimelineMax({
					paused: true,
					reversed: true,
					align: 'sequence',
				});
	//TweenMax.set ( $('.action__item'), { visibility: 'hidden' } );
	menuitem__click.on('click', function() {
		var $this = $(this),
			id = $(this).attr('data-id'),
			$cont = $('.action__item[data-id="'+id+'"]'),
			$cont_item = $('.action__item[data-id="'+id+'"] .menu-holder__list .menu-holder__item'),
			$thisClick = ($cont + "Click");
			
		menu_tween_1
			.to('.action__zone', 0,{className:"+=active"})
			.to('.action__zone', .01,{autoAlpha:"1",ease:Power1.easeOut})
			//.to('.action__item', 0,{className:"-=active"})
			//.to($cont, 0,{className:"+=active"})
			.to('.menu-holder__bg', 0.8,{scaleX:1,ease:Power2.easeInOut})
			.staggerFromTo($cont_item, 1.3,{autoAlpha:0,x:80},{autoAlpha:1,x:0 ,ease:Power2.easeInOut},.06);	
			
		if($cont.length) {
			$('.action__item').removeClass('active');
			$cont.addClass('active');
			menu_tween_1.play();
		}
		else {
			menu_tween_1.reverse();
		}	
	});
});

 

Link to comment
Share on other sites

Hey Nada and welcome to the GreenSock forums. 

 

From what I can tell, this is the expected behavior (i.e. what should happen). Think of timelines as a list of smaller animations. When you call menu_tween_1.to (creating a new tween/animation and adding it to the menu_tween_1 timeline) then later when you reverse the entire timeline those tweens/animations that you add to it should be reversed as well.

 

What are you expecting to happen? Can you please create a minimal demo recreating the issue(s) that you're facing? It would greatly help us in helping you.

 

P.S. We highly recommend GSAP 3. It's smaller, has a bunch of new features, and has a smoother API :) 

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