Search the Community
Showing results for tags 'starting values'.
Found 1 result
-
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(); });
