CODEWITHSUNDEEP
reactjsanimationtransitionvariantframer-motion
themarksmaker
themarksmaker

Reputation: 81

React/Framer Motion {variants} are not working?

So I started playing with Framer Motion in React and it's really nice.

I am able to create motions with initial/animate/exit, but for some reason I can't get variants to work? So I've got this example:

<motion.span initial={{y:300}} animate={{y:0}} exit={{y: 300}} transition={transition} >A</motion.span>

and if I refresh the page (AnimatePresence initial is true, not false), it works, I get a letter that moves from y:300 to y:0 with a defined transition.

enter image description here

but then if I want to apply that to multiple letter, so transform it into variants like this:

import React, { useEffect, useState } from "react";
import { motion, useViewportScroll, useTransform } from "framer-motion";
import { Link } from "react-router-dom";
import Scrollbar from 'react-smooth-scrollbar';
import scrolldown from '../images/scrolldown.svg';
import work1 from '../images/p1.png';
import work2 from '../images/p3.png';
import work3 from '../images/p2.png';

const transition = { duration: 1.7, ease: [0.43, 0.13, 0.23, 0.96] };


const letter = {
  initial: {
    y: 300,
  },
  animate: {
    y: 0,
    transition: { duration: 1, ...transition },
  },
};

const Home = () => (

and then use it like this:

<motion.span variants={letter}>A</motion.span>

it just won't work? am I missing something here? I don't have any other motion defined/parent or anything. and it works when using inline code, but not with variants?

enter image description here

letter isn't moving on refresh/page change when using variants?

Thanks for taking the time guys!

Upvotes: 0

Views: 9169

Answers (3)

Hamzat Oluwabori
Hamzat Oluwabori

Reputation: 31

The problem is that a span is an inline element so you can't move it up or down. to fix it just added a style of display:inline-block. Now the span behaves as a block but yet still inline👍

Upvotes: 2

cooskun
cooskun

Reputation: 678

You have to use like this

<motion.span variants={letter} initial="initial" animate="animate">
  A
</motion.span>

Upvotes: 0

themarksmaker
themarksmaker

Reputation: 81

so it seems that I needed to have a parent with these set:

<motion.div className="site-hero"
  initial='initial'
  animate='animate'
  exit='exit'>
  >

my bad for not reading the documentation properly. maybe this helps anyone

Upvotes: 5

Related Questions