Jump to content
Search Community

Animate an element to left and right like a yoyo smoothly

Maxer test
Moderator Tag

Recommended Posts

I have a red box as the element to animate.

Here is a simple representation of how I want to animate the red box. (attached image)

 

How can I get the result using TweenMax?

I have tried this with no luck:

 

 

 const e = document.getElementById('element');
 TweenMax.to(e, 1, {left:"20px", ease:Elastic.easeOut, delay:1, yoyo:true, repeat:-1});

 

As you see the box moves right at first and then starts animating from right to left. 

I just want to set the anchor point of the movement at the center of the box. so that we can not see the first movement to the right.

 

Note: I need to use TweenMax 2.1.3

 

Untitled.png

See the Pen xxVEWXO by pixy-dixy (@pixy-dixy) on CodePen

Link to comment
Share on other sites

Hey Maxer and welcome.

 

18 minutes ago, Maxer said:

Note: I need to use TweenMax 2.1.3

Why is that? GSAP 3 is way better, just sayin' ;) 

 

There are a lot of ways to do this sort of thing. The one that gives you the most control would be to use a timeline with three tweens: one that moves to the left, one that moves to the right, and one that moves it back to the center. We do recommend that you use the x property instead of left for performance reasons.

  • Thanks 1
Link to comment
Share on other sites

That's because of the easing. Change the ease to what you need for each tween. Something like this:

tl
  .to(e, 1, {ease: Power1.easeInOut, x: -10})
  .to(e, 1, {ease: Power1.easeInOut, x: 10})
  .to(e, 1, {ease: Power1.easeInOut, x: 0})

 

Your end goal is unclear. You've also not answered by you can't use GSAP 3. I see that your post on StackOverflow is similarly unclear. 

 

If you'd like additional help please say specifically what you're hoping to achieve, what you've tried, and where it's going wrong.

  • Like 1
Link to comment
Share on other sites

Yeah, this is really confusing. Is it just supposed to wiggle back and forth?

 

If you want a smooth movement through all three moves you'd ease in to the first, use linear on the second and then out of the final one.

 

Though I'm just as confused as Zach about the desired outcome here.

Link to comment
Share on other sites

Sorry for my poor English, I'm trying my best.

 

Here is a smooth animation like a yoyo using pure CSS:

 

See the Pen poyEVWb by pixy-dixy (@pixy-dixy) on CodePen

.

 

But there is an issue with that.

 

As you see the red box moves only to the right side based on its container. we can see the left side of the grey container only... That means the anchor-point of the movement is not at the center of red box. 

 

if we see the both edges (right and left side) of the grey container while red box is animating then thats the desired result.

 

Does that make sense?

Link to comment
Share on other sites

7 minutes ago, Maxer said:

As you see the red box moves only to the right side based on its container. we can see the left side of the grey container only... That means the anchor-point of the movement is not at the center of red box. 

Although you're not incorrect in saying that the anchor point is not  in the middle (it's in the top left by default), that's not the reason why it doesn't go to the left. It doesn't go to the left because you're only toggling between two left values: 0 and 200 which always go to the right. 

 

It seems like you want an animation like this?

const tl = new TimelineMax({repeat: -1, yoyo: true});

tl
  .set(e, {x: -10})
  .to(e, 1, {ease: Power1.easeInOut, x: 10})

 

Link to comment
Share on other sites

Thanks for the clarification... you're right...

 

I wrote the same code (with different syntax) before... there is a issue when I use set ... it produces a jerking initial movement...

 

I modified your code to :

 

const tl = new TimelineMax({repeat: -1, yoyo: true});

   tl
  .to(e, 1, { x: -5})
  .to(e, 1, {ease: Power1.easeInOut, x: 5})

 

With this one we haven't that jerking initial movement but the animation distortion between iteration occur...

 

You're not the only ones who confused now :(

Link to comment
Share on other sites

It sets it immediately to the starting value, yes. But again you have not described your end goal clearly. Is this what you're wanting?

See the Pen zYqKjbW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

As evidenced by the fact that 6 different people (here and on StackOverflow) have tried to answer your question and still haven't been able to help you after multiple back and forth comments, your question is very unclear. Please try to spend more time making it clear exactly what you want to happen the first time you ask :) 

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