Jump to content
GreenSock

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

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

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

 

 

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Glad to hear it helped!

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