Jump to content
Search Community

Restart Timeline

lance1572 test
Moderator Tag

Go to solution Solved by lance1572,

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

I have looked around cant seem to figure this out. Any help would be very appreciated!!

 

I have a few navigation tab items that show certain content. One of the peices of content animates when one of the tabs are clicked. I'd like to know how to restart or bring the timeline back to its original state when someone clicks on another tab.

 

Right now what happens is the animation runs fine when a assigned tab is clicked. When I shuffle through the other tabs and come back to the original assigned tab the animation doesnt start - it is in it's end state.

 

I tried to replicate it in codepen

 

 

 

I'm thinking this is more of scope issue with the variable?

 

Many thanks!!!

//Tab to start animation

j('.slide a').click(function() {
		  	runAnimation();
			
		 }); 
		 
		function runAnimation() {
			var tri1 = document.getElementById("tri-one");
			var tri2 = document.getElementById("tri-two");
			var tri3 = document.getElementById("tri-three");
			var tri4 = document.getElementById("tri-four");
			var tri5 = document.getElementById("tri-five");
			
			var tl = new TimelineLite(); 
			
			tl.add (TweenMax.to (tri1, .25, {opacity: 1}));
			tl.add (TweenMax.to (tri2, .25, {opacity: 1}));
			tl.add (TweenMax.to (tri3, .25, {opacity: 1}));
			tl.add (TweenMax.to (tri4, .25, {opacity: 1}));
			tl.add (TweenMax.to (tri5, .25, {opacity: 1}));
	
		}

//Other tab to reset the timeline

var reSetTimeline = runAnimation();

j('.info a').click(function() {
		   	reSetTimeline.restart();	
});


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

Link to comment
Share on other sites

  • Solution

Fixed. Had to enclose in a function and then move the var tl out of the click function.

j(function(){ 
		
			var tl = new TimelineLite(); 
		
			j('.slide a').click(function() {
			  
				var tri1 = document.getElementById("tri-one");
				var tri2 = document.getElementById("tri-two");
				var tri3 = document.getElementById("tri-three");
				var tri4 = document.getElementById("tri-four");
				var tri5 = document.getElementById("tri-five");
				
				
				tl.add (TweenMax.to (tri1, .25, {opacity: 1}));
				tl.add (TweenMax.to (tri2, .25, {opacity: 1}));
				tl.add (TweenMax.to (tri3, .25, {opacity: 1}));
				tl.add (TweenMax.to (tri4, .25, {opacity: 1}));
				tl.add (TweenMax.to (tri5, .25, {opacity: 1}));
		 });
		
			
			j('.info a').click(function() {
					tl.restart();
			});

		 });

Link to comment
Share on other sites

A better solution would be to create the whole timeline outside of the click. You aren't seeing it, but every time you click you're adding new tweens to that timeline. You can also shorten that a little bit using the built in selector capabilities of GSAP. Since j appears to be your alias for jQuery, GSAP should use the sizzle selector when you pass a string as a target (you may need to call TweenLite.selector = j first). Without jQuery GSAP will document.querySelectorAll or document.getElementById by default:

j(function(){ 

  var tl = new TimelineLite({paused:true}); 

  tl.add(TweenMax.to("#tri-one", .25, {opacity: 1}));
  tl.add(TweenMax.to("#tri-two", .25, {opacity: 1}));
  tl.add(TweenMax.to("#tri-three", .25, {opacity: 1}));
  tl.add(TweenMax.to("#tri-four", .25, {opacity: 1}));
  tl.add(TweenMax.to("#tri-five", .25, {opacity: 1}));

  j('.slide a').click(function() {
    tl.play();
  });

  j('.info a').click(function() {
    tl.restart();
  });

});
  • Like 2
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...