How to change direction of animation in framer motion?

Question

I animated the display of the element from height: 0 to height: 130px, expecting it to happen from the bottom of the element to the top, but this turned out not to be the case, it is important to note that the animation works with the useInView hook. The animation always starts at the top of the block, but I want it to start at the bottom.

    const ref = useRef(null);
    const isInView = useInView(ref);

    const variants = {
      hidden: { height: 0 },
      visible: { height: 130 }
    };

    <motion.div 
      ref={ref}
      className={styles.bar}
      animate={isInView ? 'visible' : 'hidden'}
      variants={variants}
      transition={{ duration: 0.5 }}
    ></motion.div>

  .bar {
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #FFF 100%);
  }

I would like the animation of an element to start from the bottom, and not from the top, is there some option in Framer Motion for this?

Answer 1

initial={{ scaleY: 0 }}
animate={{ scaleY: isInView ? 1 : 0 }}
style={{ originY: 1 }}

.bar {
    ...your styles,
    height: 130px;
  }