JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

JavaScript

Back00 = new Layer
	width: screen.width
	height: 1336
	backgroundColor: "black"
	
Back00.animate
	properties: 
		backgroundColor: "#00D5C4"
	time: 1
	delay: 0.3

logo = new Layer
	width: 518
	height: 518
	x: Align.center
	#y: 300
	image: "images/logo.png"
		
circles = new Layer
	width: 100
	height: 100
	borderRadius: 100
	backgroundColor: "FFEB00"
	y: 650
	

logo.states.add 
	one: 
		#scale: 0.1
		y: 350
	two: 
		#scale: 1
		y: 350
	three: 
		#scale: 0.4
		y: 150
		
# Define animationOptions
logo.states.animationOptions =
	curve: "spring(250,25,0)"
	
# Switch states on click
logo.onClick ->
	logo.states.next("one", "two")