Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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();
			}
		}


	});
});

 

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?

 

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

 

  • Like 3
Link to post
Share on other sites

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

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. 

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?

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

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.

×