How to setup the initial value with framer motion useAnimate hook

Question

The motion component has an initial prop:

<motion.div
  initial={{ x: "100%" }}
  animate={{ x: "calc(100vw - 50%)" }}
/>

while using useAnimate with useInView hook:

const [scope, animate] = useAnimate();
const isInView = useInView(scope, { once: true, amount: 0.8 });

useEffect(() => {
  if (isInView) {
    animate('.anim-up', { y: [100, 0] }, { duration: 1, delay: stagger(0.15) })
  }
}, [isInView]);

all the elements jump from 0 to 100 at the first keyframe, how to set up an initial value?

Answer 1

When working with useAnimate, assign the initial values in the CSS files itself. The value that you need your element to turn to must be then passed to the animate method. The prop initial isn't required when working with useAnimate. Also, it is best you refer to your elements directly instead of using classNames (as in, "span"/"p"/"div" etc.)

Here's an example of what your solution might look like (y moves from 100 to 0).

const [animationScope, animateSpan] = useAnimate();

useEffect(() => {
  if (isInView) {
    animateSpan('span', { y: 0 }, { duration: 1, delay: staggerChildren(0.15) })
  }
}, [isInView]);

//jsx to be returned:
    
  <div ref={animationScope}>
    <motion.span></motion.span>
  </div>

In the example above, the desired result can only be achieved if the <span></span>s have a transform: translateY() of 100. Also, please note that the useEffect above will only fire up if the state of the dependency isInView changes (mentioning this as it seems to be a regular variable). Good luck!