fromTo starting values

[BradLee]

I'm trying to always have a div start at the left edge or right edge of another div, then move to the center. The issues I'm having are - 

 • you can't have the same animation run twice in a row, you have to alternate between left and right

 * after the initial animation, each following animation start at a distance from greater than the value of 'from' in the 'fromTo' timeline.

 

Any ideas?

<div class="outer">
	<div class="inner"></div>
</div>


.outer {
	background-color: tomato;
	width: 400px;
	height: 300px;
	
	position: relative;
}

.inner {
	background-color: black;
	width: 100%;
	height: 30px;
	
	position: absolute;
	top: 50px;
	left: 0;
}





let one = document.querySelector(`.one`),
	two = document.querySelector(`.two`),
	three = document.querySelector(`.three`),
	four = document.querySelector(`.four`),
	div = document.querySelector(`.inner`);




one.addEventListener(`click`, () => {
	
	let tl = new TimelineLite({paused: true});
	tl.fromTo(div, 2, {left: `-100%`}, {x: `100%`})
		.play();
	
});



two.addEventListener(`click`, () => {
	
	let tl = new TimelineLite({paused: true});
	
	tl.fromTo(div, 2, {left: `100%`}, {x: `-100%`})
		.play();
	
});

See the Pen WwKpNG by BradLee (@BradLee) on CodePen

[OSUblake]

Not sure I totally understand what you're trying to do. To alternate between the values, you could make a counter and check whether it's even or odd. You can then set your value to a positive or negative value based on the even odd check. I usually put the sign on a variable in case I need to alternate other values.

// Is even bitwise check
var sign = !(count++ & 1) ? 1 : -1;

var x =  100 * sign;
var y = -100 * sign;

Is this what you're going after?

See the Pen reryKq?editors=0010 by osublake (@osublake) on CodePen

[BradLee]

Thanks Blake. My problem was trying to use a timeline when I should have been using a simple tween like you did in your example. Helpful as always.