Jump to content
GreenSock

ekfuhrmann

Is it possible to have a stagger start in-progress?

Go to solution Solved by PointC,

Recommended Posts

Happy New Year, hope you all are doing well and enjoyed the holidays!

 

My question is whether or not it's possible to get an animation "mid-progress" in GSAP similar to the way CSS keyframes work when playing an animation from a negative value?

See the Pen WNZyyRo by ekfuhrmann (@ekfuhrmann) on CodePen

Link to comment
Share on other sites

  • Solution

Sure. You could just chain a .time() or .progress() to the end of the timeline. 

 

gsap.timeline().to("[data-animation='gsap'] .box", {
  duration: 2.5,
  yoyo: true,
  yoyoEase: true,
  y: -50,
  ease: "power1.inOut",
  stagger: {
    each: 0.5,
    from: "end",
    repeat: -1
  }
}).time(3.5);

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Terrific, I imagine there is no real way to avoid the flicker that occurs before the page finishes loading for JS like that outside of hiding it until it's loaded?

Link to comment
Share on other sites

10 minutes ago, ekfuhrmann said:

Terrific, I imagine there is no real way to avoid the flicker that occurs before the page finishes loading for JS like that outside of hiding it until it's loaded?

 

Unfortunately, no due to JavaScript being run last. If it's noticeable, I usually set the opacity to 0 in the CSS and then do a quick fade in at the very start.

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