https://github.com/aboutjax/framer-flip-card-module

A framer module to quickly create a flip card effect with two image layers
https://github.com/aboutjax/framer-flip-card-module

Last synced: 2 months ago
JSON representation

A framer module to quickly create a flip card effect with two image layers

• Host: GitHub
• URL: https://github.com/aboutjax/framer-flip-card-module
• Owner: aboutjax
• Created: 2015-03-18T22:54:10.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-06-29T23:35:51.000Z (about 9 years ago)
• Last Synced: 2024-11-14T03:34:15.795Z (8 months ago)
• Language: JavaScript
• Size: 8.95 MB
• Stars: 99
• Watchers: 5
• Forks: 7
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-framer - framer-flip-card-module - Framer module to quickly create a flip card effect with two image layers. (Modules)

README

        
# What does it do?

The function `flipCard.flipCard()` will take in four parameters

1. Front image layer

2. Back image layer

3. Perspective, see [docs for reference](http://framerjs.com/docs/#layer.perspective)

4. Animation curve. e.g `spring(300,20,0)`

![What it does](http://i.imgur.com/GBWvMkm.png)

# Example

[![Flip Card Example](http://i.giphy.com/3oEjHAXzDRbMqxWH7y.gif)](http://share.framerjs.com/fj0zw6iuch5p/)

# Instructions

1.Include the module

```javascript

flipCard = require "flipCard"

```

2.Add a `front image layer` + `back image layer` + `the perspective` + `animation curve`

```javascript

flipCard.flipEffect(frontLayer, backLayer, 1600, "spring(300,20,0)")

```

note: 1600 is the perspective number used in the example above. The smaller the number the more perspective you get.