Trying to Play first tween just once but repeat the rest of animation code twice after that?

[kevywalton 6 Likes (Newbie)]

Hey,

Sorry for this simplistic question! I have a pretty basic banner Ad animation that I want to open with a kind of full banner Logo presentation that fades out and then the rest of banner animates with the usual slide left-to-right and up-down etc,. This animation should run for 3 iterations however, I do not wish to have the first tween - the logo fade out to happen other than the first time. I'm trying to do this without building a loop and was wondering if there is a neat, clean way to do so by adding some sort of onComplete or something to the initial tween so it is ignored for the last two cycles?

Please see the codepen for a basic version of what I'm building. This first tween:

`.to("#intro-panel-logo", { duration: 0.75, autoAlpha: 0, ease: "Power2.easeIn" })`

is the the one I want to run only once at the start... Thanks folks. Any help much appreciated

 

See the Pen NWaEgWq by hermeticpoet (@hermeticpoet) on CodePen

[Carl 10,927 Likes (Superhero)]

there are few ways to do this. if you want to avoid tracking how many times the 2nd part has played without incrementing a variable or something you can lean on tweenTo() and tweenFromTo()

 

I put 2 labels in your banner: after the first tween and after the end of the timeline

Then I created a main timeline that tweens to the first label and repeats a tween between the first label and last

 

let main = gsap.timeline()
.add(tl.tweenTo("banner"))
.add(tl.tweenFromTo("banner", "end", {repeat:1}))

 

See the Pen dyVwMZz?editors=0010 by snorkltv (@snorkltv) on CodePen

 

This video from my courses should help explain a bit more

 

 

 

[kevywalton 6 Likes (Newbie)]

@Carl Thanks, I really appreciate it. That's make sense and its nice and concise. 😇

[Carl 10,927 Likes (Superhero)]

Glad to hear it helped!