Jump to content
Search Community

Using .from in 2 different functions giving unexpected results

Drexel test
Moderator Tag

Recommended Posts

I have a simple animation of a red box. I have a main timeline and each animation is broken into different functions and those functions return their timeline and that is added to the main timeline. Since I am using .from for each call I would think that the red box will animation from the position it is sitting in the DOM originally. This works for the first one as expected, but the 2nd .from seems to use the "+=500" as the ending point. So when moveTwo is called the red box ends up at the +=500 position. Why doesn't the red box animation from the position of 0 each time? Do I have to use a set to capture that original position because the first .from is actually setting the x position of the red box? 

Thanks for clearing this up for me.

 

const mainTL = gsap.timeline();

function moveOne(){
        const tl = gsap.timeline();
  		tl.from("#red",{x:"+=500", duration:1})
  		return tl;
}

function moveTwo(){
        const tl = gsap.timeline();
  		tl.from("#red",{x:"-=200", duration:1})
  		return tl;
}

mainTL.add(moveOne())
    .add(moveTwo());

 

See the Pen bGoGGjP by icekomo (@icekomo) on CodePen

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...