Jump to content
GreenSock

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

fromTo starting values

Go to solution Solved by OSUblake,

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

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

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

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.

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