Jump to content
GreenSock

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

how to add delay to first part of animation

Go to solution Solved by akapowl,

Recommended Posts

This is not what I am using since it is in threejs but pulled relevant parts In my example.

 

What is happening is Almost what I want, but the part that is missing is a delay after the first move. The part inside the oncomplete is working fine, but what it looks like is the first one does not pause after the move. I tried adding a delay for the oncomplete but that did not work, and YES I need to have this inside an oncomplete I think.

 

What I want is to be able to rotate from 0 to -90 and pause then rotate between -90 and 90 with a pause after each move. The only part missing is the pause after 0 to -90

 

THanks

Jeff

See the Pen xxLRyjQ by MrBodean (@MrBodean) on CodePen

Link to comment
Share on other sites

Are you possibly looking for repeatDelay?
 

See the Pen MWvbZva?editors=0010 by GreenSock (@GreenSock) on CodePen



I'm not certain your approach with the callback is ideal though. Could you explain a little more concisely what you're trying to achieve?

(It's a little confusing as you don't have any rotations in your demo.)

Maybe lay out the steps like this so we can advise?

rotate from 0 to -90
- pause
- rotate between -90 and 90

- pause

- ?

 

I also noticed that you're using deprecated syntax. Check out the migration guide.

https://greensock.com/3-migration/

 

  • Like 3
Link to comment
Share on other sites

well this part

rotate from 0 to -90
- pause
- rotate between -90 and 90

- pause

-then yoyo true so

- rotate between 90 and -90

- pause

 

- rotate between -90 and 90

- pause

repeat -90 to 90 pause then yoyo 90 to -90 pause repeat forever

 

In the demo you did, it still does not pause at end of 0 to -90, it quickly goes to -90 to 90 without any pause

 

Yes sorry I just upgraded to ver 3 so still in TweenMax mode but will update

 

Link to comment
Share on other sites

Well I am sure there are many ways to do this, but I guess my main question, is Why does the delay command Not work? I tried it both the first tween and the one in oncomplete. Does that command only work in timelines?

Link to comment
Share on other sites

Delay works, but I don't see that in your original code. Of course, delay will only work on the first run, and not repeats. You can use both if you want, but that type of animation really should be a timeline.

 

 

 

  • Like 2
Link to comment
Share on other sites

Yes. Took them out because they were not working, I just put one in at the oncomplete and as you can see, it’s still not working. I know of a way to do it, I can use js timeout to do what I want, I just figured I was missing the obvious, but maybe not. Thoughts?

Link to comment
Share on other sites

  • Solution
15 minutes ago, MrBodean said:

Took them out because they were not working, I just put one in at the oncomplete and as you can see, it’s still not working.

 

Hello there, MrBodean.

 

The delay needs to be in the to-part of a fromTo tween - you put it in the from-part.

Here is your example with the delay working :)

 

See the Pen e734b126a6fa2cd3db6fe371c877307c by akapowl (@akapowl) on CodePen

 

  • Like 1
Link to comment
Share on other sites

You da man! I knew there had to be a simple fix. Lesson learned, thanks so much. Well I have a few more I will post later in new post….

Link to comment
Share on other sites

As a timeline.

 

gsap.timeline()
  .to("#MyObject", { x: 100 })
  .to("#MyObject", { x: -100, repeat: -1, repeatDelay: 1, yoyo: true }, "+=1")

 

See the Pen WNEROOd by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Very cool, I need to read up on timelines, thanks I will give this a shot

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