Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lynette

last frame not staying visible

Recommended Posts

Hi,

 

I have animations working on a loop of 2 and then on last loop the last animation should stay on.

 

But this is not happening :(

 

Basically, the last .from shows the duration and then fades, but I haven't added a .to for it to fade, so then it should stay, no?

 

Can anyone help?

 

Code:

function initAnim() {
  console.log("INIT ANIM");


  if (loop < 2) {
    tl.pause(0, true);
  }


  tl.play();


  tl.set(truck, {rotation: 51, x: 118, y: 83})
    .from(truck, 2, {x:-150, y:250})
    .from(line1, 1.5, {autoAlpha:0}, "-=0.5")
    .to(line1, 0.5, {autoAlpha:0})
    .from(line2, 2.15, {autoAlpha:0})
    .to(line2, 0.85, {autoAlpha:0},"leave")
    .to(truck, 0.75, {autoAlpha: 0},"leave")
    .from([line3, line4, cta], 4, {autoAlpha:0, ease:Power4.easeOut}, "last")


    .call(loopCheck, ["param1"], this)
  
}


function loopCheck() {
  if (loop >= 2) {
    console.log("END");
    tl.pause();
    tl.invalidate();
  } else {
    //  tl.to([line3, cta, line4], .4, { autoAlpha: 0, onComplete: initAnim })
    initAnim();
  }
  loop++;
}

 

Link to comment
Share on other sites

Hi lynette,

 

Like shailesh1294p has mentioned, a reduced case example would go a long way to help us troubleshoot your issue. Here's a little video that shows how to setup a CodePen (JSFiddle is also fine, just need to be somewhere we can see everything in context).

 

 

 

Without seeing the whole code, it is hard for us to guess what could be going wrong.

 

I can, however show you how I would have set the a timeline that repeats twice.

var tl = new TimelineMax({repeat:2});

tl.set(truck, {rotation: 51, x: 118, y: 83})
  .from(truck, 2, {x:-150, y:250})
  .from(line1, 1.5, {autoAlpha:0}, "-=0.5")
  .to(line1, 0.5, {autoAlpha:0})
  .from(line2, 2.15, {autoAlpha:0})
  .to(line2, 0.85, {autoAlpha:0},"leave")
  .to(truck, 0.75, {autoAlpha: 0},"leave")
  .from([line3, line4, cta], 4, {autoAlpha:0, ease:Power4.easeOut}, "last")

By default, TweenMax includes TimelineLite and TimelineMax, plus a bunch of other goodies that will cover 90% of your needs.

 

Hope this helps.

 

:)

Link to comment
Share on other sites

Ok, I have uploaded to Codepen, but it is not looping correctly at all, only the last frame does. this is really strange.

 

I hope that it is enough to see the code though.

 

You can see in the console.log that the loop does loop.

 

Here you go:

 

See the Pen aBwBZd?editors=1111 by Lynette_S (@Lynette_S) on CodePen

Link to comment
Share on other sites

Hi lynette,

 

Thanks for the Pen, it helps.

 

I can see from it that you are using TimelineMax, and that you are basing your file from one of DoubleClick's templates. There's definitely a load of code there that is not needed - Having the simplest possible example helps because we can focus in what really is broken without having to read hundreds of lines.

 

Look at this fork of your pen, you will see how much I have commented out and the majority of the animation still works.

 

See the Pen aBwBGB?editors=0011 by dipscom (@dipscom) on CodePen

 

You will also see that there's no need to put anything other than what goes inside the body tag in your Pen examples. Any JavaScript library you might want to add, like GSAP, can be added via the 'Settings' button.

 

The issue in your case was a CSS position, or the lack of it. You really should set the elements you are animating with either 'absolute' or 'relative' have a look at the CSS tab in the pen and you will see what I have done to quickly fix it.

 

Obviously your truck is not showing because you were loading it via JS but it shouldn't break anything.

 

I hope this helps.

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