Website animation
Website animation
Website animation
Website animation
Avara Site in Framer
Avara Site in Framer
Avara Site in Framer
Avara Site in Framer
Features
This site's rebuild exclusively utilizes native Framer features, with just a bit of coding required to play sounds when clicking certain elements. (You'll find the code override outlined separately below.)
I put together 29 components to establish all the user interactions. Oh, and the site is fully responsive; so yeah, it's all set for you to check out on mobile as well.
Step / 01
Remix the project.
Step / 02
See how it's built.
Step / 03
Try recreating it for practice, or copy and paste it to your project.
Code override for playing sound on click
You can apply this code override to elements to assign the sounds to them. Feel free to experiment with it.
import React, { ComponentType, useRef } from "react"
const soundUrls = {
click: "https://avara.xyz/sounds/click.wav",
error: "https://avara.xyz/sounds/error.wav",
open: "https://avara.xyz/sounds/open.wav",
close: "https://avara.xyz/sounds/close.wav",
forward: "https://avara.xyz/sounds/forward.wav",
back: "https://avara.xyz/sounds/back.wav",
}
function useSound(url: string): HTMLAudioElement {
const audioRef = useRef(new Audio(url))
return audioRef.current
}
function isTouchDevice() {
return "ontouchstart" in window
}
export function withError(Component): ComponentType {
return (props) => {
const clickSound = useSound(soundUrls.click)
const errorSound = useSound(soundUrls.error)
const handleStart = () => clickSound.play()
const handleEnd = () => errorSound.play()
const events = isTouchDevice()
? { onTouchStart: handleStart, onTouchEnd: handleEnd }
: { onMouseDown: handleStart, onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withFigure(Component): ComponentType {
return (props) => {
const clickSound = useSound(soundUrls.click)
const openSound = useSound(soundUrls.open)
const handleStart = () => clickSound.play()
const handleEnd = () => openSound.play()
const events = isTouchDevice()
? { onTouchStart: handleStart, onTouchEnd: handleEnd }
: { onMouseDown: handleStart, onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withLeave(Component): ComponentType {
return (props: any) => {
const closeSound = useSound(soundUrls.close)
const handleEnd = () => closeSound.play()
const events = isTouchDevice()
? { onTouchEnd: handleEnd }
: { onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withForward(Component): ComponentType {
return (props) => {
const forwardSound = useSound(soundUrls.forward)
const handleEnd = () => forwardSound.play()
const events = isTouchDevice()
? { onTouchEnd: handleEnd }
: { onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withBack(Component): ComponentType {
return (props) => {
const backSound = useSound(soundUrls.back)
const handleEnd = () => backSound.play()
const events = isTouchDevice()
? { onTouchEnd: handleEnd }
: { onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
import React, { ComponentType, useRef } from "react"
const soundUrls = {
click: "https://avara.xyz/sounds/click.wav",
error: "https://avara.xyz/sounds/error.wav",
open: "https://avara.xyz/sounds/open.wav",
close: "https://avara.xyz/sounds/close.wav",
forward: "https://avara.xyz/sounds/forward.wav",
back: "https://avara.xyz/sounds/back.wav",
}
function useSound(url: string): HTMLAudioElement {
const audioRef = useRef(new Audio(url))
return audioRef.current
}
function isTouchDevice() {
return "ontouchstart" in window
}
export function withError(Component): ComponentType {
return (props) => {
const clickSound = useSound(soundUrls.click)
const errorSound = useSound(soundUrls.error)
const handleStart = () => clickSound.play()
const handleEnd = () => errorSound.play()
const events = isTouchDevice()
? { onTouchStart: handleStart, onTouchEnd: handleEnd }
: { onMouseDown: handleStart, onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withFigure(Component): ComponentType {
return (props) => {
const clickSound = useSound(soundUrls.click)
const openSound = useSound(soundUrls.open)
const handleStart = () => clickSound.play()
const handleEnd = () => openSound.play()
const events = isTouchDevice()
? { onTouchStart: handleStart, onTouchEnd: handleEnd }
: { onMouseDown: handleStart, onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withLeave(Component): ComponentType {
return (props: any) => {
const closeSound = useSound(soundUrls.close)
const handleEnd = () => closeSound.play()
const events = isTouchDevice()
? { onTouchEnd: handleEnd }
: { onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withForward(Component): ComponentType {
return (props) => {
const forwardSound = useSound(soundUrls.forward)
const handleEnd = () => forwardSound.play()
const events = isTouchDevice()
? { onTouchEnd: handleEnd }
: { onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
export function withBack(Component): ComponentType {
return (props) => {
const backSound = useSound(soundUrls.back)
const handleEnd = () => backSound.play()
const events = isTouchDevice()
? { onTouchEnd: handleEnd }
: { onMouseUp: handleEnd }
return <Component {...props} {...events} />
}
}
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free
Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.