Jump to content
GreenSock

deanpien

if (_isOldIE) and TimelineMax

Recommended Posts

In the Greensock Home Page animation it shows how to use a different code for IE8 using an if (_isOldIE) ..else statement. Then, in the codepen it states:  tl.add( new TweenMax(star, duration, etc.  etc.  Is it possible to add a TimelineMax sequence there instead of TweenMax and is there a codepen example of this anywhere? 

Link to comment
Share on other sites

Hi,

 

You can add whatever GSAP instance to a timeline, TweenLite, TweenMax, TimelineLite or TimelineMax, also you can use other methods as call(), addLabel(), etc. Check the Timeline's documentation for more details.

 

Here's a very simple example. Basically the green and orange boxes are animated through a different timeline that is later nested in another timeline using the add method:

 

See the Pen PwxGRJ by rhernando (@rhernando) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks for this. I am using this code:
 
      animatethree.add(part1, 0.2)
                  .add(part2, "-=0.2")
                  .add(part3, "-=0.1")
                  .add(spottwo());
                  
    function spottwo() {
      if (_isOldIE) {
        animatethree.add(part4b);
    } else {
        animatethree.add(part4);
      }
    }

 

but this doesn't work. 

Link to comment
Share on other sites

try this

 function spottwo() {
      if (_isOldIE) {
        return part4b;
    } else {
        return part4;
      }
    }

If that doesn't work, please provide a very simple CodePen demo.

Rodrigo provided a nice example to fork and add your own code to.

If you need help with CodePen, please watch the video here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

thanks

  • Like 2
Link to comment
Share on other sites

Hi deanpien  :)

 

You need .addCallback() , pls try something like this :

var anim = new TimelineMax();
anim.to('.red',0.5,{left:200})
.to('.blue',0.5,{left:200})
.addCallback(spottwo);

// you can use Modernizr or another logic here
var yourLogic = false ;

function spottwo() {
  if (yourLogic) {
    anim.add(TweenMax.to('.green',0.5,{x:200}));
  } else {
    anim.add(TweenMax.to('.orange',0.5,{x:200}));
  }
};

and pls check these links and GSAP Docs. too :

 

.add() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

 

.addCallback() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/addCallback/

 

TimelineMax : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax

 

GSAP DOCs. : http://greensock.com/docs#/HTML5

  • Like 1
Link to comment
Share on other sites

Yup, Diaco's suggestion is equally valid, just a different approach.

 

My method uses add() to call a function when the timeline is created that returns a timeline to be placed in the parent timeline.

 

Diaco's method uses addCallback() to call a function when the timeline is playing that adds a timeline to the end of the timeline.

 

Just keep in mind that if you use addCallback(), that function will fire every time the playhead reaches that position. So if you restart or reverse the parent timeline, that callback will be called again. If you only play through the timeline once, you should be fine. 

  • Like 1
Link to comment
Share on other sites

Thanks for all the suggestions :)

 

I have created a CodePen which mimics my scenario:

 

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

 

In part3 the purpleBox is not moving and the function in part4 doesn't make the purpleBox fade.  Seems like this is not the way to set things up..I am really new to all this stuff so that explains a lot. 

 

Thanks for the quick response.  Really appreciated.

Link to comment
Share on other sites

Thanks that worked in the codepen. However my actual function is as follows:

 

part3 =  new TimelineMax();
    
          part3.call(lighttwo, null , null , "+=0.5");


        function lighttwo() {
          if (navigator.userAgent.match(/MSIE 8/) !== null) {
              animatethree.add(part4b, 5.6);
              return tl;
           } else {
              animatethree.add(part4, 5.6);
              return tl;
        }
    }           


    animatethree.add(part1, 0.2)
                .add(part2, "-=0.2")
                .add(part3, "+=0.1"); 

The function starts firing from the start. I've been trying to solve this for days..Any suggestion on how I can make this work even another workaround is appreciated. I basically want part of the master timeline to run for IE8 and another part for non IE8.

Link to comment
Share on other sites

You can handle that with one timeline , pls try this :

 

part3.call(lighttwo, null , null , "+=0.5");

function lighttwo(){
  if ( yourLogic ) {  
      part4.to("#redBox", 1, {......}) // define part4 tweens
           .to("#redBox", 1, {......});
      return part4
  } else {  
      part4.to("#redBox", 1, {......}) // define part4 tweens
           .to("#redBox", 1, {......});
      return part4
  }
};
  • Like 2
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.
×