The best practice to reset a timeline

[Jean-Tilapin]

Hello everyone,

I thought I started to better understand and use GS, but I realize I'm far from it.

I started using GS to animate small stuff on my pages, like a spinning logo while the user waits, or display panels for ajax responses.

My problem is that I don't know how to properly reset my animations once their mission is accomplished.

Concrete example :

- Notation system on an article : registered user can give a note between 1 and 5.

- when the user clicks on one of the buttons, I animate the buttons while the Ajax function do its job : spinning and rotating.

- when the response comes, the buttons go Up and disappear, and the response message comes from down and autoAlpha 0.

- and then, I would like to reset the animations to allow my user to change his vote if he wants to.

 

Here's my code so far :

$('.note-btn').on('click', function(){
		var spinningItems = $('.note-btn'),
			message = $('#notation-message'),
			spinning = new TimelineMax({paused: true, repeat: -1}),
			upWeGo = new TimelineLite({paused:true});	

		spinning
				.staggerTo(spinningItems, 0.5, {rotationY:360, ease: Expo.easeInOut}, 0.2)
				.staggerTo(spinningItems, 0.5, {rotation:360, ease: Expo.easeInOut}, 0.2);	

		upWeGo
				.staggerTo(spinningItems, 0.2, {y: -50, autoAlpha: 0, ease: Expo.easeInOut}, 0.2)
				.to(message, 0.2, {y: -50, autoAlpha: 1, ease: Expo.easeInOut})
				.to(message, 0.1, {autoAlpha: 0}, 5)
				.set('#notation-badge', {className:"-=opened"});

		

		
			
			$.ajax({			
				[AJAX stuff : no pb with it]
				beforeSend: function(){
						spinning.play();
					},	
				success: function(){
					
						$('#notation-message').find('p').text('Vote enregistré');
						spinning.stop();
						upWeGo.play();
					
				}
			})			
			
		}
		

		var spinningItems = $('.note-btn'),
			message = $('#notation-message'),
			reset = new TimelineLite();
		reset
			.set([spinningItems, message],{clearProps : "all"});
	});

Sorry for the bad indentation.

But my questions are :

Am I starting to use GS correctly ? If not, how can I improve my code ?

And how can I reset my animations to properly put the buttons back to their original state ?

 

Thank you for your time.