Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Shaban Iddrisu™

ProgressBar with GSAP's Draggable

Recommended Posts

Hello.

I hope you are doing well.

 

I have 5 boxes named 001 – 005 which are wrapped in DIV called "List", which is then wrapped in a parent DIV called "Cards". The "List" is the DRAGGABLE element, and the "Cards" DIV serves as the BOUNDS element.

 

The draggable TYPE is "x". The draggable VARS{ } object also contains the following properties, — Inertia, ThrowProps, onDrag and onThrowUpdate. This is a technique I learnt from one of BLAKES CodePen Demos and the setup works as expected.

 

However, I have a PROGRESS INDICATOR with a "Width: 0%". I want to update this to have a "Width: 100%" based on the drag. I followed the process BLAKE used in his CodePen Demo and I am still not getting a VALUE between "0 – 1" where I can then multiply that VALUE by "100" and use it as the "Width" value of the PROGRESS INDICATOR.

 

It would be very much appreciated if I can get some help from here.

Thanks.

See the Pen MWoQvKq by shaban-iddrisu (@shaban-iddrisu) on CodePen

Link to comment
Share on other sites

You would need to use minX, and you were rounding a decimal value, which force it to either 0 or 1.

let progress = this.x / (this.minX || 1);
let progressRounded = Math.round(progress * 100);

 

For a smoother progress bar, I would do a scaleX animation instead of changing the width.

gsap.set(bar, {
  width: "100%",
  scaleX: 0,
  transformOrigin: "0% 0%"
})

function moveAction() {
  gsap.to(bar, {
    duration: 0.1,
    scaleX: this.x / (this.minX || 1)
  })
}

 

  • Like 2
Link to comment
Share on other sites

7 minutes ago, OSUblake said:

For a smoother progress bar, I would do a scaleX animation instead of changing the width.

 

Or use quickSetter.

gsap.set(bar, {
  width: "100%",
  scaleX: 0,
  transformOrigin: "0% 0%"
});

const setBar = gsap.quickSetter(bar, "scaleX");

function moveAction() {
  setBar(this.x / (this.minX || 1));
}

 

  • Like 3
Link to comment
Share on other sites

In addition to Professor Blake's excellent advice, don't forget you can use the handy normalize() utility method. :)

 

let progress = gsap.utils.normalize(this.maxX, this.minX, this.x);

More info:

https://greensock.com/docs/v3/GSAP/UtilityMethods/normalize()

 

Lots of great methods over there that sometimes get overlooked.

https://greensock.com/docs/v3/GSAP/UtilityMethods

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Nice recommendation, @PointC

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@OSUblake & @PointC Thank you very much for your efficient responses. The solutions worked. Much appreciated.
@OSUblake would you mind explaining why I should use "minX" and not "maxX"...? Understanding this would be very helpful and add up to my GSAP knowledge.

Thanks.

Link to comment
Share on other sites

9 minutes ago, Shaban Iddrisu™ said:

would you mind explaining why I should use "minX" and not "maxX"...? Understanding this would be very helpful and add up to my GSAP knowledge.

 

Just log those values out and you will see. You're moving negative so maxX is 0. minX is the "max" amount you can move.

console.log(this.maxX, this.minX, this.x);

 

 

  • Like 1
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.
×