Hi! I'm pretty new at Framer. Currently just trying mimic a roll-over effect on a link. Like this : http://tympanus.net/Development/CreativeLinkEffects/ I'm a little bit lost at the beginning. Does someone have a clue to start writing HTML in FramerJS, and add an animation on roll over ? There's this one I can start I guess ? layerA = new Layer layerA.on Events.MouseOver, (event, layer) -> print event, layer Thanks a lot!

FX Fuhrmann

Posted Dec 17 - Read on Facebook

Hi! I'm pretty new at Framer. Currently just trying mimic a roll-over effect on a link. Like this : http://tympanus.net/Development/CreativeLinkEffects/

I'm a little bit lost at the beginning. Does someone have a clue to start writing HTML in FramerJS, and add an animation on roll over ?

There's this one I can start I guess ?

layerA = new Layer
layerA.on Events.MouseOver, (event, layer) ->
print event, layer

Thanks a lot!

Jonas Treub

Quick example how to use Classes for buttons: http://share.framerjs.com/16sl274s2jiq/

Adèle Beauchamp

Hi FX :)
You can create a layer and add HTML as content:

layerA = new Layer
html: "Your link"
style: {
"font-family" : "aFont"
}

and then you can change the style and / or html content, or animate your layer on mouse over :

layerA.on Events.MouseOver, (event, layer) ->
# your code here

FX Fuhrmann

Heyyy ! Thanks Adèle :D Happy to see u there

FX Fuhrmann

I have this but stuggling to make the lign appear correctly:

layerB = new Layer
width: 360
height: 10
backgroundColor: "red"
opacity: 0
y:525
x:100

layerA.on Events.MouseOver, (event, layer) -> layerB.animate
properties:
x:300
opacity: 1

layerA.on Events.MouseOut, (event, layer) -> layerB.animate
properties:
opacity: 0