how to destroy a timelinteleite after execute

[cris_mf 0 Likes (Newbie)]

Hello, I want to execute a TimelineLite only one  time. 

I use a plugin (fullPage) and when I move to a section  of the page 'secondPage', I have a function for executing the TimelineLite( animaFotos() ).

But I need the animation only works one time. I've tried with kill method but doesn´t work the animation. 

 

 

 

 

 

function animaFotos(){
	//cambio css. para mostrar imágenes y comenzar TwenLite
	fotos.css('visibility', 'visible');
	textoinfo.css('visibility', 'visible');

	tl
		.from(foto1, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.3)
		.from(foto2, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.6)
		.from(foto3, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.9)
		.from(textoinfo, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},1.2);
}

$(document).ready(function() {

	$('#fullpage').fullpage({
		css3:false,
		anchors: ['firstPage', 'secondPage','thirdPage', 'lastPage'],
		afterLoad: function(anchorLink, index){
			var loadedSection = $(this);
			//using index
			if(index == 1){
				animaLogo();
			}
			//using anchorLink
			if(anchorLink == 'secondPage'){
				$('#titulo').html('bio');
				animaFotos();
				secondLife2('.foto1','img/prueba1.jpg', 'img/1.jpg');
				secondLife2('.foto2','img/prueba1.jpg', 'img/4.jpg');
				secondLife2('.foto3','img/prueba1.jpg', 'img/3.jpg');
			}
			if(anchorLink == 'thirdPage'){
				$('#titulo').html('portfolio');
				animaCards();
			}
			if(anchorLink == 'lastPage'){
				$('#titulo').html('contacta');
				alert('contacto');
				animaCards();
			}
		}


	});
});

 

[Sahil 2,627 Likes (Superhero)]

You can do that by returning instance of timeline like in following demo, notice that it returns paused timeline. If you click the play button, animation only runs once. In your example every time you go to the section, you are calling function which triggers creation of new timeline and that plays by default. In my demo, you create only one instance and because your timeline's already becomes '1' on completion, the subsequent clicks don't trigger any animation. does that help?

 

See the Pen goxrEz?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[cris_mf 0 Likes (Newbie)]

I tried with your solution but when I came back to the section the animation run again

[Sahil 2,627 Likes (Superhero)]

You will need TweenLite, TimelineLite and CSSPlugin.

 

See the Pen goxMqN by Sahil89 (@Sahil89) on CodePen

 

[cris_mf 0 Likes (Newbie)]

thank you for your response but something is wrong in my project, I can't stop the animation. 

[Sahil 2,627 Likes (Superhero)]

Not sure what could be wrong but it works in my demo. If this doesn't solve your problem then post a reduced case codepen demo.

 

See the Pen goxRPd?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[cris_mf 0 Likes (Newbie)]

Hello Sahil!!

The code  works,  I don´t know the problem exactly, cache or sintax but it works good. Thank so much.

Now my problem are growing up because I need the same for two animations more, but I don´t use Tweenlite, and I don´t know  how to change.

Can you help me please?

[Sahil 2,627 Likes (Superhero)]

You will have to post a codepen demo with code limited to demonstrate your problem.

 

Also, there are some articles and video tutorials that you can watch which might help you figure out all the basics of GSAP.

 

https://greensock.com/get-started-js

 

https://css-tricks.com/writing-smarter-animation-code/

 

And please don't edit your posts to something entirely different after my responses it will just confuse anybody else reading the thread.

[cris_mf 0 Likes (Newbie)]

Yes, I look the doc every time.

I get  a solution for my code adaptted your solution. Thanks