This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jay Wong
Posted Aug 27 - Read on Facebook

Hey guys,

I'm trying to add a pulsing ring animation to one of my layer groups. I've added the css for the animation in a css file that I've included in my index.html head, but when I add the animation style property in my framer.js file, it doesn't work.

Anyone have any ideas as to why it's not working? Is it a specific detail with Framer that prevents customized animations to be added to a layer group?

Help would be great! =)

9 Comments

Jay Wong

the code I used in framer was:

Jay Wong

videoLayer.style =
animation: 'pulse 1.4s linear infinite'
transition: 'all 0.3s ease'

Mike Feldstein

Do you need the -webkit prefix?

Min-Sang Choi

It seems like we can't add properties other than ones named on documents. So I think you may need some workaround. 1) creating custom layer to give custom class that works with css keyframes 2) getting div id using web inspector, add css animation to that id in css file.

Min-Sang Choi

here's quick example I made using no.2 http://qcnoodling.com/test-ring.framer/ I think koen and guys will give you further information but before than it might help you.

Jay Wong

actually it turns out that you can add -webkit-animation as a style property, but you have to have the -webkit-animation property in quotes for it to work =).

Jay Wong

After I did that all was right =) Thanks everyone!

Min-Sang Choi

Jay Wong argh that was too easy :-p

Alex Hazel

ALL CSS styles used in the style bracket should be in quotes on both sides of the colon if the style was not given a keyword in Framer.js.

Which means you can always use any CSS you want. It just needs to be in quotes.

Also, "animate" is the W3C standard call for CSS animate in CSS. All other calls to the same "animate" command are simply vendor prefixes for other browsers that don't adhere to the standard. (i.e -webkit, -moz, -o)

Read the entire post on Facebook