c05dk Posted February 12, 2020 Share Posted February 12, 2020 Hi there, I am needing to create a custom slider counter. I am currently trying to plan how this maybe done. The screenshot is attached and this is what it needs to look like. I was thinking of completing this using the drawsvg plugin but unsure how it will be done. For now I am not looking at making this dynamic but how could I create this on my site and then have it draw on each slide. I am using slick slider. Is there any examples of a draw svg for slider Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 12, 2020 Share Posted February 12, 2020 Hey c05dk. DrawSVGPlugin isn't built to work with dashed lines (because in order to draw the line you need to use dashes which overrides the original dashes). But if you have a solid colored background like you do in the image above you can fake it using layered paths like this post shows: Otherwise you'll have to animate a mask or clip path to reveal the dashed line which is more complicated but doable. We also have a helper function that animates a line along a path to particular anchors that may be useful to you: https://greensock.com/docs/v3/HelperFunctions#anchorsToProgress In terms of getting this working with a slider, on the slider's change event you could animate to the next or previous point based on the index. Link to comment Share on other sites More sharing options...
mikel Posted February 12, 2020 Share Posted February 12, 2020 Hey @c05dk, A little help See the Pen JjdYpEX by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 12, 2020 Share Posted February 12, 2020 Wow, @mikel you are so helpful! Users in these forums should pay you for your work 1 Link to comment Share on other sites More sharing options...
c05dk Posted February 12, 2020 Author Share Posted February 12, 2020 amazing thank you! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now