// Welcome to Code in Framer // Get Started: https://www.framer.com/developers import * as React from "react" import { useState } from "react" import { motion, useAnimation } from "framer-motion" import { addPropertyControls, ControlType } from "framer" const steps = ["Page 1", "Page 2", "Page 3"] /** * These annotations control how your component sizes * Learn more: https://www.framer.com/developers/#code-components-auto-sizing * * @framerSupportedLayoutWidth auto * @framerSupportedLayoutHeight auto */ export default function Unbox_form(props) { const [activeStep, setActiveStep] = useState(0) const [formData, setFormData] = useState(["", "", ""]) const controls = useAnimation() const handleNext = () => { controls.start({ opacity: 0, x: -50 }) setTimeout(() => { setActiveStep((prevActiveStep) => prevActiveStep + 1) controls.start({ opacity: 1, x: 0 }) }, 300) } const handleBack = () => { controls.start({ opacity: 0, x: 50 }) setTimeout(() => { setActiveStep((prevActiveStep) => prevActiveStep - 1) controls.start({ opacity: 1, x: 0 }) }, 300) } const handleTextFieldChange = (index: number) => (event: React.ChangeEvent) => { const newFormData = [...formData] newFormData[index] = event.target.value setFormData(newFormData) } const isLastStep = activeStep === steps.length - 1 const { tint } = props return (

{steps[activeStep]}

{activeStep !== 0 && ( )}
) } addPropertyControls(Unbox_form, { tint: { title: "Tint", type: ControlType.Color, defaultValue: "#09F", }, }) // Styles are written in object syntax // https://react.dev/reference/react-dom/components/common#usage const boxStyle = { margin: 25, width: 125, height: 125, borderRadius: 25, }

Page 1