GSAP Puller filter

[dev-kp]

Hey all,

 

Based on @OSUblake codepen - I have changes a few things.

Original codepen: 

See the Pen YrXdGZ by osublake (@osublake) on CodePen

 

1. I am trying to create a way to display the selected value - the grey box at the top. I am using a .hitTest not sure if that the best way to do this.

2. I also want to find a way to have the selected value start on a specific value, this is kind of working but I had to do a very long way to achieve this. Line 25 using startValue variable. It compares two arrays and is a very painful way of doing it. 

3. I tried to rewirte this in GSAP3 but no luck - everything gets broken (think its the negative progress update)  

See the Pen zYrqydo?editors=0010 by dev-kp (@dev-kp) on CodePen

. No values show up unless you drag and it gets stun and all the spacing is completely off.

 

Any help anyone help give would be great!

 

Thank

 

See the Pen xxZVMRz?editors=1010 by dev-kp (@dev-kp) on CodePen

[ZachSaucier]

I was able to convert it to GSAP 3 only making sure to wrap the value passed into progress to the 0-1 range:

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

 

 A hit test is fine to get the middle value. There are other ways to get it like elementsFromPoint and using the offset/"scroll" value but if what you have works and you understand it, that's great.

 

Your approach to setting the default position is interesting  Honestly it's not that bad of an approach. There's probably a more clever way to do it if you spend time thinking about it.

[dev-kp]

@ZachSaucier thank you for this! completely forgot about that part! 

 

In regards to the arr 'lookup' is there no clever way to use % or something?

 

Gonna try and figure it out if any ideas let me know.

 

And thanks again!

[ZachSaucier]

15 hours ago, dev-kp said:

In regards to the arr 'lookup' is there no clever way to use % or something?

Like I said, there very probably is but I didn't spend the time to figure something out. What you have is fine is this is the extent of the project.

[OLIVER]

nice

[dev-kp]

thank for the help!