Pages

[friendlygiraffe]

Hi,

 

I'm building a HTML5 banner using GreenSock, but I was wondering what best practice was for transitioning between frames/pages/scene

// page 1

TweenLite.from(text1, 1, {delay:0.5, alpha:0});
TweenLite.from(main_img, 1, {delay:1, alpha:0});
TweenLite.from(sky_logo, 1, {delay:1.5, alpha:0});

// page 2

var del2 = 3;

TweenLite.to(text1, 0.5, {delay:del2, alpha:0, overwrite:false});
TweenLite.to(main_img, 0.5, {delay:del2, alpha:0, overwrite:false});
TweenLite.from(text2, 1, {delay:del2+0.5, alpha:0});
TweenLite.from(pick_button, 1, {delay:del2+1, alpha:0});

// page 3

var del3 = del2+3;

TweenLite.to(text2, 0.5, {delay:del3, alpha:0, overwrite:false});
TweenLite.to(pick_button, 0.5, {delay:del3, alpha:0, overwrite:false});
TweenLite.from(text3, 1, {delay:del3+0.5, alpha:0});

At the moment, i'm using a series of delays - see code above, but I imagine there's a better way of doing it, split into separate functions for example, or creating a series of divs that hold all the elements of each page? eg:

<div id="container">
	<div id="page1">
        	<img src="text1.png" id="text1_dc">
        	<img src="sun.jpg" id="main_img_dc">
        	<img src="logo.png" id="logo_dc">
        </div>
	<div id="page2">
        	<img src="img_text2.png" id="text2_dc">
        	<img src="img_pick_button.png" id="pick_button_dc">
        	<img src="img_text3.png" id="text3_dc">
        </div>	
</div>

Thanks in advance

 

[Rodrigo]

Hi,

 

In this cases I think the best option would be to use a Timeline instance with absolute positioning, something like this:

var tl = new TimelineLite(),
    del1 = 0.5,
    del2 = 3,
    del3 = del2 + 3;

//page1

tl
  .from(text1, 1, {autoAlpha:0}, del1)
  .from(main_img, 1, {autoAlpha0}, del1*2)
  .from(sky_logo, 1, {autoAlpha0}, del1*3)

// page2
  .to(text1, 0.5, {autoAlpha:0, overwrite:false}, del2)
  .to(main_img, 0.5, {autoAlpha:0, overwrite:false}, del2)
  .from(text2, 1, {autoAlpha:0}, del2+0.5)
  .from(pick_button, 1, {autoAlpha:0}, del2+1)

// page 3
  .to(text2, 0.5, {autoAlpha:0, overwrite:false}, del3)
  .to(pick_button, 0.5, {autoAlpha:0, overwrite:false}, del3)
  .from(text3, 1, {autoAlpha:0}, del3+0.5);

Finally is always useful to see a live sample of the code, please look at this post in order to learn how to create a codepen demo:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[friendlygiraffe]

Thanks a lot for your reply Rodrigo

 

i'm using a system called DoubleClick, which doesn't allow folders or jQuery. Therefore I'm using the CSSPlugin:

<script src="CSSPlugin.min.js" type="text/javascript"></script>	
<script src="TweenLite.min.js" type="text/javascript"></script>	
<script src="TimelineLite.min.js" type="text/javascript"></script>	

Is it possible to use TimelineLite in this way? It doesn't seen to have an affect

 

Thanks

[Carl]

In order to handle pages, sections, panel", or key frames of your animation, I would start with separate divs for each as you have.

 

This is typically how I would start:

http://codepen.io/GreenSock/pen/14568c8c64038d6ad6db68a40e5872c2

 

Then I would use set() calls in a TimelineLite to position each panel at 0,0 when its time to display it an animate its children as shown here:

http://codepen.io/GreenSock/pen/Fqmsa

 

---

 

As for your latest post, I'm not quite sure how not using "folders or jQuery" relates to using CSSPlugin. You will need CSSPlugin for animating the CSS properties of DOM elements and it has no dependency on jQuery. 

 

Regardless, I don't see how there should be any problem loading those 3 scripts you have shown. Perhaps if you post a link to your files or a zip we can better asses the problem.

[friendlygiraffe]

Thanks for your reply Carl.

 

I have set up the banner in that manner now, it's much easier separating the frames into divs

 

edit: No worries I figured it out