Is this possible?

[maths]

Hi,

 

I don't really have any example or code to show yet, since i first want to check if my idea is even possible.

 

What i want to do is following:

 

Let's say i want to animate a div from x:0 to x:200. Is it possible during that animation to also animate let's say skewX from 0 to 2 and back to 0 and make it finish at the same time as the X?

[Carl]

Yes, that is exactly the type of animation that GSAP excels at.

 

My suggestion would be a timeline with 2 tweens that run at the same time.

• first tween: move along the x axis
• second tween: animate the skewX to 2 and have it repeat and yoyo. To account for the repeat the duration should be half the value of the first tween.

Edited August 16, 2023 by Carl

[maths]

Thank you for the instructions! I'll give it a go and get back if needed.

[maths]

const el = document.getElementById("el");
const btn = document.getElementById("btn");
const tl = gsap.timeline({ paused: true });

tl.to(el, { x: 300, duration: 1 });
tl.to(el, { skewX: 10, duration: 0.5, repeat: 1, yoyo: true }, "-=1");

btn.addEventListener("click", () => {
  tl.play();
});

Done!