Jump to content
Search Community

Attempting to animate scaleX (width) of CSS Pseudo element

yvesFindlay test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi, I have been attempting to animate the scaleX property of a psuedo element using scrolltrigger.  The code is fairly simple. However, I cannot see the solution to this problem.

 

When the trigger reaches the pseudo elements container I want to trigger an animation which will change the scaleX property from 0 to 1. Simply, I want the line to grow from left to right.

See the Pen VwWqLWG by yvesFin (@yvesFin) on CodePen

Link to comment
Share on other sites

  • yvesFindlay changed the title to Attempting to animate scaleX (width) of CSS Pseudo element
  • Solution

Welcome to forums @yvesFindlay

 

You should put your ScrollTrigger in the timeline.

 

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".skills__wrapper",
    endTrigger: ".skills__wrapper",
    start: "+=400px center",
    end: "bottom center",
    markers: true
  }
});

tl.fromTo(
  rule,
  {
    cssRule: {
      scaleX: 0
    }
  },
  {
    duration: 1,
    ease: "none",
    cssRule: {
      scaleX: 1,
      transformOrigin: "left"
    }
  }
);

 

And animation specific vars, like duration and ease do not go inside the cssRule object.

 

 

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