Jump to content
Search Community

Using TimeLineLite for slide transitions

ChronixPsyc 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

Hi all,

 

First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing.

 

My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing :)

 

My question is probably more a javascript question rather than a question about the actual engine files..

 

I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second.

 

Could someone please point me in the right direct of how I could do this please?

 

Thanks in advance!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums. 

 

Thanks for sharing your enthusiasm about the platform. 

 

There are probably half a dozen ways to do this.

 

I would strongly recommend watching this video so that you understand all the control you have with the timing of when tweens start inside of TimelineLite or TimelineMax timelines:

http://www.greensock.com/sequence-video/

 

If you are building a basic linear sequence of slides animating in, pausing, animating out, animataing in etc. You might want to start with just creating 1 timeline that handles all the animation.

var tl = new TimelineLite();

tl.from(slide1, 1, {left:400})
//add more tweens that animated slide1 content in
...
//add slide1 animate out transition 5 seconds after animate in sequence finishes

tl.to(slide1, 1, {left:-400}, 5)

//animate in slide2 immediately after slide 1 animates out
tl.from(slide2, 1, {top:-400})

The platform is flexible to handle nesting timelines in timelines, so you could create all your animations for each slide in their own timeline and then add() them to a master timeline.

 

This codepen here: http://codepen.io/GreenSock/pen/plsng illustrates a powerful concept of creating functions that generate and return timelines. You can use these functions to insert child timelines into a parent timeline at virtually any time.

 

Frankly some of this may be a bit much to handle after only a day with the platform. I would really suggest watching that video and viewing the codepen example it links to. Study the timeline docs and the important methods like to(), from(), add(), and staggerFrom() http://api.greensock.com/js/com/greensock/TimelineLite.html

 

---

 

Let us know if you have any more questions along the way. 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums. 

 

Thanks for sharing your enthusiasm about the platform. 

 

There are probably half a dozen ways to do this.

 

I would strongly recommend watching this video so that you understand all the control you have with the timing of when tweens start inside of TimelineLite or TimelineMax timelines:

http://www.greensock.com/sequence-video/

 

If you are building a basic linear sequence of slides animating in, pausing, animating out, animataing in etc. You might want to start with just creating 1 timeline that handles all the animation.

var tl = new TimelineLite();

tl.from(slide1, 1, {left:400})
//add more tweens that animated slide1 content in
...
//add slide1 animate out transition 5 seconds after animate in sequence finishes

tl.to(slide1, 1, {left:-400}, 5)

//animate in slide2 immediately after slide 1 animates out
tl.from(slide2, 1, {top:-400})

The platform is flexible to handle nesting timelines in timelines, so you could create all your animations for each slide in their own timeline and then add() them to a master timeline.

 

This codepen here: 

See the Pen plsng by GreenSock (@GreenSock) on CodePen

illustrates a powerful concept of creating functions that generate and return timelines. You can use these functions to insert child timelines into a parent timeline at virtually any time.

 

Frankly some of this may be a bit much to handle after only a day with the platform. I would really suggest watching that video and viewing the codepen example it links to. Study the timeline docs and the important methods like to(), from(), add(), and staggerFrom() http://api.greensock.com/js/com/greensock/TimelineLite.html

 

---

 

Let us know if you have any more questions along the way. 

 

Thanks a lot for this information! It's already started to come together :)

 

When you say I can add things onto the timeline, it seems to animate it in reverse for the second slide.

 

I've pasted my code below, but not sure why this isn't working. Any ideas?

 

Thanks!

 

HTML:

<div id="main-container">

<!-- FIRST SLIDE - START -->

	<div id="firstSlide">

        <div id="logo"></div>
        
        <div id="timelinelite"></div>
        
        <div id="tagline">
        
            <span>Welcome</span>
            <span>to</span>
            <span>The</span>
            <span>Game</span>
            
        </div>
    
    </div>

<!-- FIRST SLIDE - END -->





<!-- SECOND SLIDE - START -->

	<div id="secondSlide">
    
    	<div id="logo"></div>
        
        <div id="timelinelite"></div>
        
        <div id="tagline">
        
        	<span>Second</span>
            <span>Slide</span></div>
    
    </div>

<!-- SECOND SLIDE - END -->

JavaScript:

$(window).load(function() {
		
		var logo = $("#logo"),
			firstSlide = $("#firstSlide"),
			secondSlide = $("#secondSlide"),
			timelineLite = $("#timelinelite"),
			tagline = $("#tagline span"),
			restartBtn = $("#restart"),
			tl = new TimelineLite();
			
			tl.from(firstSlide, 1, {alpha:0})
		  	  .from(logo, 0.5, {delay:0.2, alpha:0})
		  	  .from(timelinelite, 0.2, {width:"0px", alpha:0}, "-=0.02")
		  	  .staggerFrom(tagline, 0.5, {rotation:"-40deg", alpha:0, scale:1.8, ease:Back.easeOut}, 0.2)
			  
			tl.to(firstSlide, 1, {left:-500}, 5)
			
			tl.from(secondSlide, 1, {alpha:0})
		  	  .from(logo, 0.5, {delay:0.2, alpha:0})
		  	  .from(timelinelite, 0.2, {width:"0px", alpha:0}, "-=0.02")
		  	  .staggerFrom(tagline, 0.5, {rotation:"-40deg", alpha:0, scale:1.8, ease:Back.easeOut}, 0.2)
	
		restartBtn.click(function() {
			tl.restart();
		});
	
	});
Link to comment
Share on other sites

Glad to hear things are coming along.

 

Not really sure what's wrong. Noticed you are using timelinelite and timelineLite (cap L)  to reference an element. Might want to make sure you keep that consistent.

 

Ultimately it would help to see this running on codepen with some code comments. Its very difficult to imagine what you mean by the code running in reverse.

 

You can just fork a basic example like this: http://codepen.io/GreenSock/pen/7246d0e3ebfe775eea901b27bcf0a361

and add your html / css/ js.

 

I'm sure we can help you figure it out.

Link to comment
Share on other sites

Hi Carl,

 

Sorry I haven't updated this post over the weekend. It's been too nice to work on a computer ;)

 

I've created the code at the link below. I don't know if it has something to do with the fact that I am using tagline style twice (once in the first slide and again in the second)?

 

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

 

Thanks!

Link to comment
Share on other sites

Yeah, I would say the problem is that you are using the same IDs in multiple places. 

You are using #timelineLite and #tagline on multiple elements, no good. IDs are only supposed to be unique. 

 

You should create classes .timelineLite and .tagline and apply them like so:

 


<div id="firstSlide">
        
        <div class="timelineLite"></div>
        
        <div class="tagline">
        
            <span>Welcome</span>
            <span>to</span>
            <span>The</span>
            <span>Game</span>
            
        </div>
    
    </div>

When you target these elements with jQuery you can do

var slide1Tagline = $("#firstSlide .tagline span");

You can see this concept working on 1 slide here:

http://codepen.io/GreenSock/pen/5097bbdedb87ad841aa60873ddeb578f

 

 

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