• Content count

  • Joined

  • Last visited

Community Reputation

43 Newbie

About smallio

  • Rank
    Advanced Member

Recent Profile Visitors

171 profile views
  1. Slider w/ scroll bar that locks on slides when dragged

    Wow. thank you @Sahil! I've been trying to figure this out for days! So excited to learn from this & implement this in my new project
  2. Slider w/ scroll bar that locks on slides when dragged

    @Sahil Sorry for the delayed response, been afk for a few days. I realised I somehow linked you the wrong pen & have subsequently deleted the most recent one ... hence why the draggable wasn't doing anything lol. I think I confused the situation a lot when explaining it before. I love your example & it's really close to what I'm trying to (I like the little progress bar as well ). The thing I really can't understand is how to use draggable to lock onto each slide. The example below shows almost exactly what I'm trying to do. For example - Say there are 10 slides You're viewing the 4th slide (the dot is at 40% across the line), and as you drag the dot to the 5th slide it locks to the 50% mark across the line along with the 5th slide now in view. Does that make sense? Here's it dragging but without it locking to slides: I also tried on your example but it makes the line bigger as the progress goes on instead of moving the dot to the right place. It divides the grey line at the bottom and each slider fills the percent and locks. Instead of doing that I just want a small circle or square that sits on that line and locks to the slide percentage. Slide 1 = 0% Slide 2 = 10% Slide 3 = 20% etc... Cheers, Smallio
  3. So as mentioned in a previous post, I'm following the advice @OSUblake & have been taking apart projects to try and learn as much as possible. My focus is creating a really nice slider that can be updated and made more complex as I learn. I'm not quite confident enough to make from scratch with GASP, so I'm using a friends Flickity logic for the slider & slowly converting it over. My goals were to learn how to: 1. drag slides & lock with a natural feel (✓) 2. navigate with touch/swipe & arrow keys (✓) 3. use mousedown to scale slides down for easy navigation (✓) 4. use count up to change numerical data on slides (✓) ♥ to @Sahil for the crazy example! 5. drag a horizontal scroll bar at the bottom that locks to each section (×) I just can't get my head around number 5. I managed to make it work seamlessly with the GASP draggable knob, but I'm really obsessed with learning how to make a horizontal scroll bar correspond with a slider with draggable. Here's the example I'm trying to recreate (found on the Greensock example page) - Or a lil' GIF for the busy folks Searched the forums/codepen/deep space for examples of this & no cigar yet! Has anyone seen any examples of this with GASP that aren't buried in super complex websites? Best, Smallio
  4. Draggable w/ Snap & ThrowProps | Dynamic Velocity

    My bad, I did kinda think that... just thought my example was close to what he was trying to do. Your word is my command lord @Sahil, new thread coming up
  5. Draw SVG - Circle changes direction

    lol @Sahil you're a master... brilliant work
  6. Draw SVG - Circle changes direction

    @PointC is there anyway round this behaviour though? I like your idea of a timeline method but you can't reverse or it will just draw it the other way. It would be cool if there was a way to force it to to complete the full circle draw every time, then use onComplete to call a function from the mouse leave that does the same thing but with the other draw SVG params to make it pull back from the start vs just play & reverse. Going to give it a try later
  7. Draggable w/ Snap & ThrowProps | Dynamic Velocity

    @Noturnoo Maybe this will help? You can change friction & selectedAttraction to get the effect I think your looking for (view it on codepen or it cuts the bottom off).
  8. Draw SVG - Circle changes direction

    Thanks @PointC & @Carl respectively I thought this might be the issue. Had a brain fart and somehow didn't think about using fromTo tweens, lol. Ah the joys of 2am developing Thanks for clearing that up for me guys & also glad to have highlighted a possible issue with the small stroke, that was definitely adding to the confusion (along with it looking like the opacity was changing if you hovered quick enough). Hope it's an easy fix for ya Carl!
  9. Draw SVG - Circle changes direction

    Small issue with my circle here, it works the first time on hover (in & out) and then changes direction. Any ideas why it breaks after the first hover? It should look like this. Many thanks, Smallio
  10. Tween up/down through a list of numbers

    I feel like I'm a parrot at this stage just repeating thank you to some of you guys, but seriously, THANK YOU!!! You don't even know how much I appreciate the contributions. Things like this can take hours for a noob like me to figure out & being able to see stuff like this is totally invaluable. Gratz on mod status & Superhero as well btw.
  11. GASP slider with numeric values

    Once again, thank you @Sahil & @OSUblake!
  12. Tween up/down through a list of numbers

    Oooo nice idea!!! I'll see if I can implement that
  13. Tween up/down through a list of numbers

    I'll do the same for the k/m and that should work perfectly!
  14. Tween up/down through a list of numbers

    Spot on @Acccent thank you!