README.md

Lenticular

For more information on Lenticular, please see here

2 ~ 3 images lenticular effect

Sensor and Simulator module is included.

Demo : https://framer-modules.github.io/sensor.framer/lenticular.framer

Preview

Both

Left

Right

Feature

• Multiple browser supported
• Lenticular effect according to left and right tilt

Installation

Copy the "modules" and "images" folder and paste it into your prototype folder  

More info about modules for Framer Studio: FramerJS Docs - Modules

Usage

Lenticular

Constant

Lenticular.Orientation

Tilting direction

Lenticular.Orientation.Left

Left

Lenticular.Orientation.Right

Right

Method

setDefault(layer)

Default layer (Include image)

Parameters

• layer [Layer] : layer

addScene(layer, orientation

Add other layer

Parameters

• layer [Layer] : layer
• orientation [Orientation] : tilting direction (default : Lenticular.Orientation.Both)

Sample

Both

# Module
{Lenticular} = require 'Lenticular'
# Constructor
lenticular = new Lenticular
    width: 750, height: 1334
    backgroundColor: "white"
# set default
lenticular.setDefault new Layer width: 750, height: 1334, image: "images/before.jpg"
# add layer
lenticular.addScene new Layer width: 750, height: 1334, image: "images/after.jpg"

Left

# Module
{Lenticular} = require 'Lenticular'
# Constructor
lenticular = new Lenticular
    width: 750, height: 1334
    backgroundColor: "white"
# set default
lenticular.setDefault new Layer width: 750, height: 1334, image: "images/before.jpg"
# add layer
lenticular.addScene (new Layer width: 750, height: 1334, image: "images/after.jpg"), Lenticular.Orientation.Left

Right

# Module
{Lenticular} = require 'Lenticular'
# Constructor
lenticular = new Lenticular
    width: 750, height: 1334
    backgroundColor: "white"
# set default
lenticular.setDefault new Layer width: 750, height: 1334, image: "images/before.jpg"
# add layer
lenticular.addScene (new Layer width: 750, height: 1334, image: "images/after.jpg"), Lenticular.Orientation.Right