Is it possible to draw-on a circle using a line/border? Trying to recreate this gif.
Creating shapes is not build into the framework itself but since Framer is web based you could use SVG or Canvas. I would go with SVG. If you search this group on SVG all kind of interesting implementations will pop up. Good luck
I created something that probably does close to what you want. Search for my SVG Animation post.
Here's the post you want... in case someone comes across this again: https://www.facebook.com/groups/framerjs/permalink/684997204960687/
Try this out. I'm using it in one of my prototypes and it looks great http://thatedchao.com/published/2014/09/27/framer.html
Actually, I had to modify his somewhat - try this http://share.framerjs.com/xqh1w4j4qgcc/
Here it is with a little animation at the end filling in the circle http://share.framerjs.com/fnax2xqod4lb/
And while I'm at it, why not add in Andreas Wahlström's really cool FontAwesome module to animate a little check mark onto the screen when it's done.
Here's a little animated gif of the animation http://giphy.com/gifs/3o85xL92eSa9LoGPYs/
Oops, forgot to attach the project. I also added in some sound using Black Ray's UISound module http://share.framerjs.com/euqtekt5j24k/
Try playing around with this value "circleDia = 100". The stroke size and the size of the check mark will automagically adjust to be appropriate for whatever size you want to make the loader
Andrew Nalband Awesome!
That is one cool trick Andrew Nalband!
Thanks, Black Ray and Irwansyah! By the way, Black Ray - I really like the sounds in your project. Where did you get them?
Andrew Nalband Two of them from "SFX Monkey Prototype Sound Pack", the rest one is my handmade :phttps://sfxmonkey.com
I added some more properties that are easy to adjust and more sound:
# set the color of your progress bar, stroke and backgroundprogressBarColor = "#41D19C"strokeColor = "#ddd"bgColor = "white"
# set the diameter of the circle - the size of the stroke in the progress bar and the checkmark will adjust accordinglycircleDiameter = 300
#set the speed of the progress bar to whatever you'd likespeed = 0.6
You can also touch the layer now to initiate the animation, and there are some animations that respond to your touch.
Andrew Nalband You have made excellent work with your .GIF at http://giphy.com/gifs/3o85xL92eSa9LoGPYs/ Do you have a higher-resolution version of the .GIF with a transparent background? Thank you very much! This would really help me with my project. :)
Hi John, I recorded that from my screen using the framer project in the comments above, so that's the source material. What's your project ?
Andrew Nalband I am creating a game using the Unity game engine. I would like to use your GIF as a loading animation. Unfortunately, I cannot just implement a framer project directly in Unity, so that's why I need a transparent GIF (which Unity supports). Thanks for your reply! :)
Andrew Nalband 2 weeks later, I still need your transparent GIF... :(
Hi John, I created that with a screen recording of a framer project, so I never made a transparent version.
Andrew Nalband Can you create one? We would really appreciate it.
Hi John, is this for a game you're selling to people?
Andrew Nalband The game is free, but contains ads.
Andrew Nalband What do you think?
Andrew Nalband Unfortunately, I'm still waiting for a response...