k-vyn / framer-material-kit Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Animating constraints is SUPER useful when creating dynamic layouts, but I want to use states to animate a layer and its constraints. Is this possible?
Right now its says "orange" for both "-o" and "-p"
In your doc, status bar is called by 'statusBar = new material-kit.StatusBar'
It should be updated to say '...= new m.StatusBar'
Sorry, another question.
When i add m.utils.inky
to a layer, how can i set it up so it doesn't overlap that layer?
See example here:
http://share.framerjs.com/81e3guoi02ui/
I'd like the effect to be constraint within the thumbnail container.
First off, this project is pretty dope. The docs are good and it's got great potential. Have there been any articles about this posted on Medium or, better yet, on an authoritative blog? It'd be great to get some more eyeballs on this repo as the search index keyword strength is relatively low.
Some initial suggestions to raise visibility with low effort:
README
.README
.README
.README
outline so there's only a single H1
.H1
to "Framer Material Design Kit" even though that's not the name.Do the above and write a halfway decent post and let me know if traffic doesn't double.
Is there a way to set the constraint like this when animating a constraint?
topLayer.constraints.leading = [myLayer,16]
This is what i'm trying to do:
cardText.constraints =
top: [title, 16]
leading: 16
trailing: 16
if setup.image
thumbnail = new Layer
superLayer: card
image: setup.image
height: setup.imageHeight
thumbnail.constraints =
leading:0
trailing:0
top: [title, 24]
# cardText.constraints.top = thumbnail, 16
I'm a little confused how the animate constraints function works. In the doc it says to use "m.layout.animate()", but in the example below it, it uses "m.animateLayout..." I tried both and neither seems to be working for me. Am I using it wrong? http://screencast.com/t/KwhwbCqvXbl
I am trying to use the material kit in an existing project. I don't use Framer Studio, so i'm a little confused as to what the minimum set of files I need from your repo is. Also, do you use the framer.js file directly from the Framer repo, or have you modified it? Whats the purpose of framer.generated.js and framer.modules.js?
Any assistance is appreciated! :)
Thanks
Hey,
I was wondering where the Click events for the Tabs and Actions in the App Bar are set?
I tried to add a slide right/left to switch between tabs instead of only tapping, but can't figure out where the events are in the module. I also couldn't figure out how to set a Click on a Action icon. :(
Any help appreciated!
Any chance those modules can be made into NPM packages? It would be way easier for some folks to manage their dependencies that way. Thanks!
@k-vyn When animating with states or updating with scroll.updateContent()
it seems to inverse values. When I need + height
it does the opposite and cuts it off, and the other way around...
any idea why this is?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.