Skip to content

Latest commit

 

History

History
executable file
·
337 lines (249 loc) · 8.99 KB

README.md

File metadata and controls

executable file
·
337 lines (249 loc) · 8.99 KB
Raw

gif by Michelle Porucznik

framer-giphy

Provides easy access to gifs, jifs and stickers (= gifs with transparent background) hosted on giphy.com.

Example project on framer.cloud


Getting started

Install with Framer Modules

OR

Step Instruction
1 Download the giphy module and unzip the downloaded archive
2 Put giphy.coffee into your prototype's modules-folder or drag'n'drop it onto the Framer window
3 Add or change the autogenerated require-line on the top of the code to {giphy} = require 'giphy'
4 Save (CMD+S) your project to get Framer to load the module
5 GIPHY UP your prototype whooop whoop: 
{giphy} = require 'giphy'

amazeballz = new Layer
	frame: Screen.frame
	image: giphy.search("giphy", 2)

amazeballz.onTouchStart -> @image = giphy.random("awesome")

stickerCount = 15
stickerSize = Screen.width / stickerCount

giphy.trending {limit: stickerCount, stickers: true}, (stickers) ->

	for sticker, i in stickers
		trendingSticker = new Layer
			size: stickerSize
			maxY: Screen.height
			x: stickerSize * i
			image: sticker


Usage

Available methods
giphy.search()
giphy.trending()
giphy.translate()
giphy.random()
giphy.gifById()
giphy.gifsById()


• giphy.search()

Search all Giphy GIFs for a word or phrase.

GIFs:

# Request single gif

searchGif = new Layer
	image: giphy.search("awesome")

searchGif = new Layer
	x: 200
	image: giphy.search("awesome", 1) # second argument offsets result
# Request multiple gifs (limit-paramteter must be > 1)

giphy.search "awesome", limit: 3, (gifs, rawdata) ->
	for gif, i in gifs
		searchGif = new Layer
			y: 200
			x: i * 200
			image: gif

giphy.search "awesome", 2, {limit: 5, rating: "r"}, (gifs, rawdata) ->
	for gif, i in gifs
		searchGif = new Layer
			y: 400
			x: i * 200
			image: gif

Stickers:

# Request single sticker

searchSticker = new Layer
	image: giphy.search("awesome", sticker: true)

searchSticker = new Layer
	x: 200
	image: giphy.search("awesome", 1, sticker: true) # second argument offsets result
# Request multiple stickers (limit-paramteter must be > 1)

giphy.search "awesome", {limit: 3, sticker: true}, (gifs, rawdata) ->
	for gif, i in gifs
		searchSticker = new Layer
			y: 200
			x: i * 200
			image: gif

giphy.search "awesome", 2, {limit: 5, rating: "r", sticker: true}, (gifs, rawdata) ->
	for gif, i in gifs
		searchSticker = new Layer
			y: 400
			x: i * 200
			image: gif

Available parameters:

Parameter Type Default Description
limit   number 1 number of results to return, maximum 100
offset number 0 results offset                     
rating string ? limit results to those rated (y,g, pg, pg-13 or r)  
lang   string ? specify default country for regional content; format is 2-letter ISO 639-1 country code. See list of supported languages here
sticker boolean false returns gif with transparent background          

• giphy.trending()

Fetch GIFs currently trending online. Hand curated by the Giphy editorial team. The data returned mirrors the GIFs showcased on the Giphy homepage..

GIFs:

# Request single gif

trendingGif = new Layer
	image: giphy.trending()

trendingGif = new Layer
	x: 200
	image: giphy.trending(1) # argument offsets result
# Request multiple gifs (limit-paramteter must be > 1)

giphy.trending limit: 3, (gifs, rawdata) ->
	for gif, i in gifs
		trendingGif = new Layer
			y: 200
			x: i * 200
			image: gif

giphy.trending 2, {limit: 5, rating: "r"}, (gifs, rawdata) ->
	for gif, i in gifs
		trendingGif = new Layer
			y: 400
			x: i * 200
			image: gif

Stickers:

# Request single sticker

trendingSticker = new Layer
	image: giphy.trending(sticker: true)

trendingSticker = new Layer
	x: 200
	image: giphy.trending(1, sticker: true) # first argument offsets result
# Request multiple stickers (limit-paramteter must be > 1)

giphy.trending {limit: 3, stickers: true}, (stickers, rawdata) ->
	for sticker, i in stickers
		trendingSticker = new Layer
			y: 200
			x: i * 200
			image: sticker

giphy.trending 2, {limit: 5, rating: "r", stickers: true}, (stickers, rawdata) ->
	for sticker, i in stickers
		trendingSticker = new Layer
			y: 400
			x: i * 200
			image: sticker

Available parameters:

Parameter Type Default Description
limit   number 1 number of results to return, maximum 100
offset number 0 results offset                     
rating string ? limit results to those rated (y,g, pg, pg-13 or r)  
sticker boolean false returns gif with transparent background          

• giphy.translate()

The translate API draws on search, but uses the Giphy "special sauce" to handle translating from one vocabulary to another. In this case, words and phrases to GIFs. Example implementations of translate can be found in the Giphy Slack, Hipchat, Wire, or Dasher integrations.

GIFs:

# Request single gif

translateGif = new Layer
	image: giphy.translate("awesome")

translateGif = new Layer
	x: 200
	image: giphy.translate("awesome", rating: "r")

Stickers:

# Request single sticker

translateSticker = new Layer
	image: giphy.translate("awesome", sticker: true)

Available parameters:

Parameter Type Default Description
rating string ? limit results to those rated (y,g, pg, pg-13 or r)  
lang   string ? specify default country for regional content; format is 2-letter ISO 639-1 country code. See list of supported languages here
sticker boolean false returns gif with transparent background          

• giphy.random()

Returns a random GIF, limited by tag. Excluding the tag parameter will return a random GIF from the Giphy catalog.

GIFs:

# Request single gif

randomGif = new Layer
	image: giphy.random()

randomGif = new Layer
	x: 200
	image: giphy.random("meme") # limit randomness by tag

randomGif = new Layer
	x: 400
	image: giphy.random("meme", rating: "r")

Stickers:

# Request single sticker

randomSticker = new Layer
	image: giphy.random(sticker: true)

randomSticker = new Layer
	x: 200
	image: giphy.random("meme", sticker: true) # limit randomness by tag

randomSticker = new Layer
	x: 400
	image: giphy.random("meme", {rating: "r", sticker: true})

Available parameters:

Parameter Type Default Description
rating string ? limit results to those rated (y,g, pg, pg-13 or r)  
sticker boolean false returns gif with transparent background          

• giphy.gifById()

Returns a single GIF by ID.

GIFs:

# Request single gif

gifById = new Layer
	image: giphy.gifById("feqkVgjJpYtjy")

• giphy.gifsById()

Returns multiple GIFS by IDs.

GIFs:

# Request multiple gifs

giphy.gifsById ["feqkVgjJpYtjy", "7rzbxdu0ZEXLy"], (gifs, rawdata) ->
	for gif,i in gifs
		layer = new Layer
			x: i * 200
			image: gif