Jump to content
Search Community

how to destroy a timelinteleite after execute

cris_mf test
Moderator Tag

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

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