Jump to content
Search Community

Alternating moves with SteppedEase

mosk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi - 

 

Trying to learn and explore some possibilities with GSAP.

Was playing with SteppedEase and wanted to know if there was a way to alternate movements with this, say move a square 200px right, then 200px down, then 200px  right again and so forth.

 

I tried using a for loop with modulo to alternate tweens but wasn't sure how to structure things.

Have attached codepen and would appreciate any suggestions.

 

See the Pen YbrwmM by moskthescribe (@moskthescribe) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @mosk. And thanks for being a Club GreenSock member!

 

There are actually a lot of ways to accomplish this. You don't need a loop at all. Here's one way to do it: 

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

 

The pertinent code: 

var mySteps = 7,
    durationPerStep = 1,
    pixelsPerStep = 200,
    tl = new TimelineLite();

tl.to("#square", durationPerStep * mySteps, {x:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)})
  .to("#square", durationPerStep * mySteps, {y:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)}, durationPerStep / 2);

 

Does that help? 

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