GitXplorerGitXplorer
m

framer-giphy

public
9 stars
0 forks
0 issues

Commits

List of commits on branch master.
Unverified
9d492309e1cfe94c46ede719003828d22988ade3

fixed Framer Module link

mmarckrenn committed 7 years ago
Unverified
e497e38b5c7db336e3325c870dd50d06265da597

Compatibility with Framer Modules

mmarckrenn committed 7 years ago
Unverified
e9d92a09ca38c6b92f40d2e8721c6aa0a5149371

various fixes

mmarckrenn committed 8 years ago
Unverified
cf165a50ff11839762c910d44685a3110cfc5eb6

fixed various bugs

mmarckrenn committed 8 years ago
Unverified
ae57f00231d4748ae9bb147e3725448b2d759ca0

Update README.md

mmarckrenn committed 8 years ago
Unverified
2d4991809fbe06a6243b5d8e98d6fb5d507c27b6

updated download link

mmarckrenn committed 8 years ago

README

The README file for this repository.

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