Jump to content
Search Community

Move object x px y times

maxflick 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!

 

The solution to this is probably the simplest one ever but it feels like I've tried everything. 

 

How write this with one line of code?

 

    tl3.to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05})
    .to(animationImg, 0, {x:"-=238", delay:0.05});
 
I want the img to move 238px and then move 238px and so on every 0.05 seconds.
 
Thanks in advance!
Link to comment
Share on other sites

Hello maxflick and welcome to the GreenSock Forum!

 

You can try and use the repeat special property:

// on a individual tween level
tl3.to(animationImg, 0, {x:"-=238", delay:1:0.05, repeat:-1}); // repeats tween forever aft

// or via the TimelineMax constructor that affects all tweens within this timeline

var t13 = new TimlineMax({repeat:-1, repeatDelay:0.05}); // you have to use repeatDelay instead of delay
tl3.to(animationImg, 0, {x:"-=238"});

-1 means infinite

 

TimelineMax Docs:

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

  • repeat : Number - Number of times that the animation should repeat after its first iteration. For example, if repeat is 1, the animation will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.
     
  • repeatDelay : Number - Number - Amount of time in seconds (or frames for frames-based tweens) between repeats. For example, if repeat is 2 and repeatDelay is 1, the animation will play initially, then wait for 1 second before it repeats, then play again, then wait 1 second again before doing its final repeat.

If you are still having an issue please create a limited codepen demo example so we can see and test your code live.

 

 

:)

  • Like 2
Link to comment
Share on other sites

You can technically create a single tween with a SteppedEase: https://greensock.com/docs/#/HTML5/Easing/SteppedEase/

 

If you want to move an object 500px over the course of 5 seconds and jump (step) 100px each time you would do something like:

TweenLite.to(thing, 5, {x:500px, ease:SteppedEase.config(5)});

A steppedEase animates an object to the end values in a set number of steps.

 

However it seems that you are calculating how far you want to move in each step with a specific delay between steps and a certain number of steps. So in your case you have to use those values to try to determine the duration of the tween and the total amount of distance traveled.

You could figure those things out like so:

var amountPerStep = 100;
var numberOfSteps = 4;
var totalAmount = amountPerStep * numberOfSteps;
var delayBetweenSteps = 0.2;
var duration = (numberOfSteps+1) * delayBetweenSteps;


//create a tween with 4 steps and 0.2 second of delay between steps
TweenLite.to(".green", duration, {x:totalAmount, ease:SteppedEase.config(numberOfSteps)});

Demo: http://codepen.io/GreenSock/pen/MJBNYx?editors=1010

 

 

Although that works and technically creates a tween with one line of code, its a bit cryptic. I'd much prefer to put a bunch of sets in a timeline like:

 

var pink = new TimelineLite()
pink.set(".pink", {x:"+=100"});//insert first tween at time 0
for (var i = 0; i < 4; i++){
  pink.set(".pink", {x:"+=100"}, "+=" + 0.2) // insert subsequent tweens with 0.2 second delay
}

http://codepen.io/GreenSock/pen/wgxLMo?editors=0010

 

 

  • Like 3
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...