Skip to content

Instantly share code, notes, and snippets.

View mrrocks's full-sized avatar
🤓
Learning

Fran Pérez mrrocks

🤓
Learning
37 followers · 20 following
View GitHub Profile
@mrrocks
mrrocks / font-size-mixin.scss
Created October 14, 2012 14:41
SCSS (Sass) mixin to define font-size in PX, line-height and font-smoothing and then convert it to rem (base 10)
// Sets up the base 10 stuff
html { font-size: 62.5%; }
// Defaults values
$default-line-height: 1.5 !default;
$default-font-smoothing: subpixel-antialiased !default;
// Function to convert pixels to rems
@mrrocks
mrrocks / innertia.coffee
Last active August 29, 2015 14:15
Draggable layer with inertia and boundaries in FramerJS
ACCELERATION = 180
INERTIA_CURVE = "spring(140, 30, 0, 0)"
Layer::inertia = ->
calculateFinalY = =>
newY = @y + @draggable.calculateVelocity().y * ACCELERATION
switch
when newY > 0 then return 0
@mrrocks
mrrocks / stoppropagation.coffee
Last active August 29, 2015 14:15
Stop event propagation in FramerJS
layer.on Events.DragEnd, (event) ->
event.stopPropagation()
@mrrocks
mrrocks / cycle.coffee
Created February 22, 2015 17:25
Cycle through functions in FramerJS
one = -> print 1
two = -> print 2
toggler = Utils.cycle(one, two)
layer.on Events.Click, -> do toggler()
@mrrocks
mrrocks / relative-values.coffee
Created March 3, 2015 11:55
Relative values in animation/state properties
layer.animate
properties:
x: '+=50'
opacity: '-=0.1'
@mrrocks
mrrocks / originalProps.coffee
Last active February 14, 2016 20:34
Store initial properties for later use
layer.orgProps = layer.props for layer in Framer.CurrentContext.getLayers()
@mrrocks
mrrocks / gist:89cf3a855a2ed0c16d30
Created July 10, 2015 19:25
HSLA color scale
"hsla(#{ i / numberOfLayers * 360 }, 70%, 70%, 1)"
@mrrocks
mrrocks / slowmotion.coffee
Last active August 29, 2015 14:25
Slowmotion in Framer
Framer.Loop.delta = 0.004 # Where higher number is faster
@mrrocks
mrrocks / material-curves.coffee
Created July 22, 2015 15:50
Material Animation Curves
fastInSlowOut = [0.4, 0, 0.2, 1]
fastInRealSlowOut = [0.4, 0, 0, 1]
linearInSlowOut = [0, 0, 0.2, 1]
fastInLinearOut = [0.4, 0, 1, 1]
# Use: curve: "bezier-curve(#{fastInSlowOut})"
@mrrocks
mrrocks / custom-properties.coffee
Created February 14, 2016 20:34
Layer class custom properties
class Class extends Layer
@define "newProperty",
get: ->
@property
set: (value) ->
@property = value
@emit "change:newProperty"
object = new Class