Jump to content
Search Community

issue with multiple timelines

Liam@II test
Moderator Tag

Go to solution Solved by Jonathan,

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,

 

i have seven timelines each inside a function. created in the same way as shown in the 'GSAP JS Banner Example'

 

six contain content and a seventh to control them all.

 

i can get one timeline to activate (works when i use each of the 6 content timelines) but when i use the .add property to append another timeline at the end of the first. i get nothing

 

 

surely this has a simple solution. i have tried to replicate the 'GSAP JS Banner Example' as diligently as i can but it just wont work for me.

 

can someone take a look at the code on my codepen link please

 

thanks

See the Pen yeyeob by Liamii (@Liamii) on CodePen

Link to comment
Share on other sites

  • Solution

Hello Liam@II, and welcome to the GreenSock Forum!

 

The reason you are not seeing any of your nested timelines run, is because you are not returning the timeline within your function.

 

Using return of the timeline inside your function:

 

See the Pen XXJKLR by jonathan (@jonathan) on CodePen


 

function opening() {

  var opening = new TimelineMax();

  // timeline tweens go here

  return opening; /* returns the timeline for this function
}

x

So your code would be like this:

x

function opening() {

  var opening = new TimelineMax();
  opening.set("#opening", {visibility:"visible"})
  opening.from("#background", 0.75, {y:"-125", autoAlpha:0, ease: Power3.easeOut},"start" )
         .from("#beigeBar", 0.75, {y:"+125", ease: Power3.easeOut},"start" )
         .from("#logo", 0.5, {y:"+100", autoAlpha:0, ease: Power3.easeOut},"logo")  

  return opening; /* return timeline */
}


function frameOne() {
   
  var frame1 = new TimelineMax();
  frame1.set("#frameOne", {visibility:"visible"})
       .from("#dreaming", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut},"frameOneIn")
       .from("#of1", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#two", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#bathrooms", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})

       .to("#dreaming", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut},"frameOneOut")
       .to("#of1", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#two", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#bathrooms", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
  
  return frame1; /* return timeline */
}


function frameTwo() {
  
  var frame2 = new TimelineMax();
  frame2.set("#frameTwo", {visibility:"visible"})
  frame2.from("#or1", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut},"frameTwoIn")
       .from("#that", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#fourth", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#bedroom", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})

       .to("#or1", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut},"frameTwoOut")
       .to("#that", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#fourth", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#bedroom", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})

  return frame2; /* return timeline */
}


function frameThree() {

  var frame3 = new TimelineMax();
  frame3.set("#frameThree", {visibility:"visible"})
  frame3.from("#or2", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut},"frameThreeIn")
       .from("#hundred", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#of2", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#garden", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})

       .to("#or2", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut},"frameThreeOut")
       .to("#hundred", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#of2", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#garden", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})

  return frame3; /* return timeline */
}


function frameFour() {
  
  var frame4 = new TimelineMax();
  frame4.set("#frameFour", {visibility:"visible"})
  frame4.from("#we", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut},"frameFourIn")
       .from("#can", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#help", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#you", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#with", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#the", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})
       .from("#numbers", 0.5, {x:"-250", autoAlpha:0, ease: Power3.easeOut})

       .to("#we", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut},"frameFourOut")
       .to("#can", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#help", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#you", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#with", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#the", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#numbers", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})

  return frame4; /* return timeline */
}


function frameFive() {
  
  var frame5 = new TimelineMax();
  frame5.set("#frameFive", {visibility:"visible"})
  frame5.from("#try", 0.5, {x:"-130%", autoAlpha:0, ease: Power3.easeOut},"frame5")
       .from("#our", 0.5, {x:"-130%", autoAlpha:0, ease: Power3.easeOut})
       .from("#mortgage", 0.5, {x:"-130%", autoAlpha:0, ease: Power3.easeOut})
       .from("#calculator", 0.5, {x:"-130%", autoAlpha:0, ease: Power3.easeOut})

       .to("#try", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut},"frameTFourOut")
       .to("#our", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#mortgage", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut})
       .to("#calculator", 0.5, {x:"+250", autoAlpha:0, ease: Power3.easeOut});

  return frame5; /* return timeline */
}

function frameSix() {
  
  var frame6 = new TimelineMax();   
  frame6.set("#frameSix", {visibility:"visible"})
  frame6.from("#cta", 0.5, {x:"-130%", autoAlpha:0, ease: Power3.easeOut},"logo")
        .to("#cta", 0.4, {opacity:0.1, repeat:5, repeatDelay:0.2, yoyo:true},"cta");

  return frame6; /* return timeline */
}


function createMasterTimeline() {

  var timeline = new TimelineMax();
  timeline.add(opening())
          .add(frameOne())
          .add(frameTwo()) 
          .add(frameThree()) 
          .add(frameFour()) 
          .add(frameFive()) 
          .add(frameSix());

  timeline.timeScale(1) // put a 4 in there, I dare you 
}

createMasterTimeline();

Resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

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