Responsive liveSnap

[kf420]

I'm trying to create a range input replacement using GSAP Draggable, and can't figure out how to make it responsive. Specifically, how to recalculate X position of draggable relative to new container width. Eventually this will be used in a calculator, so I'd like to avoid resetting draggable and keep whatever values user has entered prior to page resize.

 

Any guidance will be greatly appreciated.

See the Pen ZEWZmPV by kf420 (@kf420) on CodePen

[ZachSaucier]

Hey kf420. 

 

You need to recreate the Draggable on resize. With that being said you don't have to lose the old value. Here's how I'd set it up:

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

 

Side notes:

• You're making several of the most common GSAP mistakes. I recommend going through that article  
• We recommend using scale over animating width and height because it's more performant. Same thing for opacity over the color but less so.
• We recommend using the position parameter over using delays in timelines. Let GSAP do the hard work!
• Don't combine CSS transitions with GSAP animations.

[kf420]

Thanks, that makes sense.

 

Choosing width/height was intentional because border width must remain the same. Is that possible with scaling?

 

What is the difference between range.myDraggable[0] (line 41 in your code) and what I used - draggable[0]? 

 

Also, is there any downside to using pseudo-elements for track and thumb backgrounds? And if not, what would that selector look like inside of .each()? I couldn't figure out how to use variables with CSSRulePlugin.getRule(".range__thumb:before").

[ZachSaucier]

10 minutes ago, kf420 said:

Choosing width/height was intentional because border width must remain the same. Is that possible with scaling?

Ah, I see. It isn't with regular DOM elements. With SVG it could be.

 

10 minutes ago, kf420 said:

What is the difference between range.myDraggable[0] (line 41 in your code) and what I used - draggable[0]? 

It's not range.myDraggable[0]. It's range.myDraggable. I save your actual draggable instance reference to the range element instead of saving the array of draggables to a random variable. That way you can make use of it later when the resize function is called.

 

10 minutes ago, kf420 said:

is there any downside to using pseudo-elements for track and thumb backgrounds?

Psudo-elements aren't easily editable by JS. I recommend using actual elements, even if you want to dynamically generate them.

 

10 minutes ago, kf420 said:

I couldn't figure out how to use variables with CSSRulePlugin.getRule(".range__thumb:before").

We don't really recommend the CSSRulePlugin in most cases because it's usually better to use real elements on use CSS variables instead.

[kf420]

Any reason why keyboard navigation no longer works on your version?

[ZachSaucier]

Nope. Probably something related to what I changed