cris_mf

how to destroy a timelinteleite after execute

Recommended Posts

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();
			}
		}


	});
});

 

Share this post


Link to post
Share on other sites

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?

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

You will need TweenLite, TimelineLite and CSSPlugin.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Yes, I look the doc every time.

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

Share this post


Link to post
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.