Jump to content
Search Community

Is this possible?

maths test
Moderator Tag

Recommended Posts



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?

Link to comment
Share on other sites

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 by Carl
  • Like 3
Link to comment
Share on other sites

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", () => {


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