There are two main interactions in this example onWheel and onDrag with a few additions:

• onWheel is a callback that simulates scroll behavior as it is invoked after each mousewheel interaction. After normalizing the read value to compensate for different browser engines, we store this number in a ref, setting the distance of pixels covered by wheel interaction. This normalized value is then used in a requestAnimationFrame loop where we set the actual speed at which the marquee will move based on the wheel direction.

onDrag with the addition of onDragStart and onDragEnd callbacks define the draggable behavior of the marquee. Setting drag prop to “x” limits the direction to horizontal and setting dragConstraints to 0 allows for reading the values of the drag interaction, but will not actually drag the DOM element out of place. This is useful as after each interaction we set the speed value manually and apply to a child element and not the actual dragged container.

Performance - When not to re-render?

But how do we store the calculated value, are we setting state somewhere? One of the main concepts in React is state — setting it and reading from it to update the UI. This of course causes re-renders and while being the core piece of logic in React, it can have an impact on performance significantly if occurring too many times, resulting in low fps and bad ux.

An approach to overcome this is to resort to useRef hook and mutate the value which would then be read in a rAF loop for example. But what if we need more control of the value, what if we need to be able to pass the value down the component tree and listen to when the value has changed to do further calculations? Or what if it’s not just a single number but a more complex piece of information containing certain physical properties like damping, mass, stiffness, etc? In come useMotionValue and useSpring — hooks that bypass React’s render cycle and allow for visual updates without compromising performance through re-renders.

MarqueeItem and background effects

The InteractiveMarquee component holds two marquee items which flow one after the other. This is achieved by applying transformation along the x axis and listening to when the entire item is off screen. Then, its position is set directly before or after the now visible item, depending on the speed. We perform this routine within the rAF callback of the MarqueeItem component achieving a seamless looping effect of the content.

To add more sprinkle on top, we created another motion div which updates its opacity based on the speed motion value, responding to the intensity of the interaction. The opacity of course needs to be contained within 0 to 1 range and this can be done using a Framer Motion utility hook called useTransform, which maps the given motion value into a desired range.