Jump to content

Animated Simple Cursor Dot Custom CSS Help - Keep getting ERROR?

Recommended Posts

Hey I'm trying this neat little dot cursor effect to work on my site and I'm not sure where to start? I love this cursor because its super simple and fits the minimal design of the sight I'm working on but I cannot figure out how to get it to work properly. I keep getting the following ERROR:

error evaluating function `rgba`: color functions take numbers as parameters

Here is the link to the code

Any help would be greatly appreciated. 🙂 

Edited by Drewski
Link to comment
  • Drewski changed the title to Animated Simple Cursor Dot Custom CSS Help - Keep getting ERROR?
  • Replies 5
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

On 1/26/2023 at 3:38 AM, tuanphan said:

Have you added this CSS & JS yet?

image.thumb.png.e73064fdcb1d681dd13c97a4e7d80833.png

image.thumb.png.434dcb5c2a6ac8d8bc3102c8da9e3979.png

Also, current Codepen code use Babel, have you converted it to standard JavaScript yet?

image.png.fcfc3260e44f9d93a0193e9b6aabec55.png

I have not converted it. That might be the issue. How would I do that? Sorry, I'm relatively new to html/css in squarespace. Do I need to add those links as well? I guess I am a little lost. 

Link to comment

Try adding this to Code Injection > Footer

<div id="app"/>
<style>
  /* play with vars for different effets */
:root {
  --color-cursor: 220, 90, 90;
  --cursor-outline-shade: 0.3;
  --cursor-size: 10px;
  --cursor-outline-size: 12px;
}

html,
body {
  cursor: none;
  background-color: #2f2c2c;
  color: #fff;
  font-family: "Inter", sans-serif;
}

html *,
body * {
  cursor: none;
}

#app {
  text-align: center;
}

h1 {
  margin-bottom: 0.7em;
  font-size: 3em;
  font-weight: 800;
  text-align: center;
}

a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  transition: 0.5s ease;
}
a:hover {
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

p {
  width: 80%;
  max-width: 32em;
  margin: 0 auto 1em;
  line-height: 1.7;
  font-weight: 300;
}

hr {
  border: 0;
  height: 2px;
  width: 3em;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto 1em;
}

h1 + hr {
  margin: 0 auto 2em;
}

#cursor-dot,
#cursor-dot-outline {
  z-index: 999;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

#cursor-dot {
  width: var(--cursor-size);
  height: var(--cursor-size);
  background-color: rgba(var(--color-cursor), 1);
}

#cursor-dot-outline {
  width: var(--cursor-outline-size);
  height: var(--cursor-outline-size);
  background-color: rgba(var(--color-cursor), var(--cursor-outline-shade));
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script>
  function useEventListener(eventName, handler, element = document) {
  const savedHandler = React.useRef();

  React.useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  React.useEffect(() => {
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    const eventListener = event => savedHandler.current(event);

    element.addEventListener(eventName, eventListener);

    return () => {
      element.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
}

/**
 * Animated Cursor
 * Replaces the native cursor with a custom animated cursor.
 *
 * @author Stephen Scaff
 */
function AnimatedCursor({
  color = '220, 90, 90',
  outerAlpha = 0.4,
  innerSize = 8,
  outerSize = 8,
  outerScale = 5,
  innerScale = 0.7 })
{
  const cursorOuterRef = React.useRef();
  const cursorInnerRef = React.useRef();
  const requestRef = React.useRef();
  const previousTimeRef = React.useRef();
  const [coords, setCoords] = React.useState({ x: 0, y: 0 });
  const [isVisible, setIsVisible] = React.useState(true);
  const [isActive, setIsActive] = React.useState(false);
  const [isActiveClickable, setIsActiveClickable] = React.useState(false);
  let endX = React.useRef(0);
  let endY = React.useRef(0);

  const onMouseMove = React.useCallback(({ clientX, clientY }) => {
    setCoords({ x: clientX, y: clientY });
    cursorInnerRef.current.style.top = clientY + 'px';
    cursorInnerRef.current.style.left = clientX + 'px';
    endX.current = clientX;
    endY.current = clientY;
  }, []);

  const animateOuterCursor = React.useCallback(
  time => {
    if (previousTimeRef.current !== undefined) {
      coords.x += (endX.current - coords.x) / 8;
      coords.y += (endY.current - coords.y) / 8;
      cursorOuterRef.current.style.top = coords.y + 'px';
      cursorOuterRef.current.style.left = coords.x + 'px';
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animateOuterCursor);
  },
  [requestRef] // eslint-disable-line
  );

  React.useEffect(() => requestRef.current = requestAnimationFrame(animateOuterCursor), [animateOuterCursor]);

  const onMouseDown = React.useCallback(() => setIsActive(true), []);
  const onMouseUp = React.useCallback(() => setIsActive(false), []);
  const onMouseEnter = React.useCallback(() => setIsVisible(true), []);
  const onMouseLeave = React.useCallback(() => setIsVisible(false), []);

  useEventListener('mousemove', onMouseMove, document);
  useEventListener('mousedown', onMouseDown, document);
  useEventListener('mouseup', onMouseUp, document);
  useEventListener('mouseenter', onMouseEnter, document);
  useEventListener('mouseleave', onMouseLeave, document);

  React.useEffect(() => {
    if (isActive) {
      cursorInnerRef.current.style.transform = `scale(${innerScale})`;
      cursorOuterRef.current.style.transform = `scale(${outerScale})`;
    } else {
      cursorInnerRef.current.style.transform = 'scale(1)';
      cursorOuterRef.current.style.transform = 'scale(1)';
    }
  }, [innerScale, outerScale, isActive]);

  React.useEffect(() => {
    if (isActiveClickable) {
      cursorInnerRef.current.style.transform = `scale(${innerScale * 1.3})`;
      cursorOuterRef.current.style.transform = `scale(${outerScale * 1.4})`;
    }
  }, [innerScale, outerScale, isActiveClickable]);

  React.useEffect(() => {
    if (isVisible) {
      cursorInnerRef.current.style.opacity = 1;
      cursorOuterRef.current.style.opacity = 1;
    } else {
      cursorInnerRef.current.style.opacity = 0;
      cursorOuterRef.current.style.opacity = 0;
    }
  }, [isVisible]);

  React.useEffect(() => {
    const clickables = document.querySelectorAll(
    'a, input[type="submit"], input[type="image"], label[for], select, button, .link');

    clickables.forEach(el => {
      el.style.cursor = 'none';

      el.addEventListener('mouseover', () => {
        setIsActive(true);
      });
      el.addEventListener('click', () => {
        setIsActive(true);
        setIsActiveClickable(false);
      });
      el.addEventListener('mousedown', () => {
        setIsActiveClickable(true);
      });
      el.addEventListener('mouseup', () => {
        setIsActive(true);
      });
      el.addEventListener('mouseout', () => {
        setIsActive(false);
        setIsActiveClickable(false);
      });
    });

    return () => {
      clickables.forEach(el => {
        el.removeEventListener('mouseover', () => {
          setIsActive(true);
        });
        el.removeEventListener('click', () => {
          setIsActive(true);
          setIsActiveClickable(false);
        });
        el.removeEventListener('mousedown', () => {
          setIsActiveClickable(true);
        });
        el.removeEventListener('mouseup', () => {
          setIsActive(true);
        });
        el.removeEventListener('mouseout', () => {
          setIsActive(false);
          setIsActiveClickable(false);
        });
      });
    };
  }, [isActive]);

  const styles = {
    cursor: {
      zIndex: 999,
      position: 'fixed',
      opacity: 1,
      pointerEvents: 'none',
      transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out' },

    cursorInner: {
      position: 'fixed',
      borderRadius: '50%',
      width: innerSize,
      height: innerSize,
      pointerEvents: 'none',
      backgroundColor: `rgba(${color}, 1)`,
      transition: 'opacity 0.15s ease-in-out, transform 0.25s ease-in-out' },

    cursorOuter: {
      position: 'fixed',
      borderRadius: '50%',
      pointerEvents: 'none',
      width: outerSize,
      height: outerSize,
      backgroundColor: `rgba(${color}, ${outerAlpha})`,
      transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out' } };



  return /*#__PURE__*/(
    React.createElement(React.Fragment, null, /*#__PURE__*/
    React.createElement("div", { ref: cursorOuterRef, style: styles.cursorOuter }), /*#__PURE__*/
    React.createElement("div", { ref: cursorInnerRef, style: styles.cursorInner })));


}


function App() {
  return /*#__PURE__*/(
    React.createElement("div", { className: "App" }, /*#__PURE__*/
    React.createElement(AnimatedCursor, null), /*#__PURE__*/
    React.createElement("section", null, /*#__PURE__*/
    React.createElement("h1", null, "Animated Cursor ", /*#__PURE__*/React.createElement("br", null), "React Component"), /*#__PURE__*/
    React.createElement("hr", null), /*#__PURE__*/
    React.createElement("p", null, "An animated cursor component made as a ", /*#__PURE__*/React.createElement("a", null, "Functional Component"), ", using ", /*#__PURE__*/React.createElement("a", null, "React hooks"), " like ", /*#__PURE__*/React.createElement("a", null, "useEffect"), " to handle event listeners, local state, an  ", /*#__PURE__*/React.createElement("a", null, "RequestAnimationFrame"), " management."), /*#__PURE__*/
    React.createElement("p", null, "Hover over these ", /*#__PURE__*/React.createElement("a", null, "links"), " and see how that animated cursor does it's thing. Kinda nifty, right? Not right for most things, but a nice move for more interactive-type projects. Here's another ", /*#__PURE__*/React.createElement("a", { href: "" }, "link to nowhere.")), /*#__PURE__*/
    React.createElement("p", null, "Play with the ", /*#__PURE__*/React.createElement("a", null, "css variables"), " to influence the cursor, cursor outline size, and amount of scale on target hover. I suppose those could all be ", /*#__PURE__*/React.createElement("a", null, "props"), " with some. Click in the margin to check click animation."), /*#__PURE__*/
    React.createElement("p", null, "There's probably a better way to manage these kind of events, but this was the best I could come up with. Recently started mucking more with React cause I'm down with the simplicity of Functional Components and Hooks. And if you read the docs, the future ain't class components. So, best get on them functions."))));



}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.