last frame not staying visible

[lynette 0 Likes (Newbie)]

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++;
}

 

[shailesh1294p 0 Likes (Newbie)]

Can u please share the pen link...    

[Dipscom 2,815 Likes (Superhero)]

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.

 

[lynette 0 Likes (Newbie)]

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

[Dipscom 2,815 Likes (Superhero)]

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.