I am in the process of converting a html/css gsap navbar to React. This is returning the following error:
error '$' is not defined no-undef
I cannot seem to find any other guides on the matter that seem to relate to my issue.
import React from "react";
import "../components/Navbar.css";
import { gsap } from "gsap";
import { ExpoScaleEase, RoughEase, SlowMo } from "gsap/EasePack";
gsap.registerPlugin(ExpoScaleEase, RoughEase, SlowMo);
var t1 = gsap.timeline({ paused: true });
t1.to(".one", 0.8, {
y: 6,
rotation: 45,
ease: "power3.inout"
});
t1.to(".two", 0.8, {
y: -6,
rotation: -45,
ease: "power3.inout",
delay: -0.8
});
t1.to(".menu", 2, {
top: "0%",
ease: "power3.inout",
delay: -2
});
t1.staggerFrom(".menu ul li", 2, { x: -200, opacity: 0, ease: "power3.inout" }, 0.3);
t1.reverse();
$(document).on("click", ".toggle-btn", function () {
t1.reversed(!t1.reversed());
});
$(document).on("click", "a", function () {
t1.reversed(!t1.reversed());
});
export const Navbar = () => {
<div>
<div className="toggle-btn">
<span className="one"></span>
<span className="two"></span>
</div>
<div className="menu">
<div className="data">
<ul>
<li><a href="/">Return Home ➔</a></li>
<li><a href="/">Companies</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Contact Us</a></li>
</ul>
</div>
</div>
</div>
}
export default Navbar;
There are two places where you reference $:
$(document).on("click", ".toggle-btn", function () {
t1.reversed(!t1.reversed());
});
$(document).on("click", "a", function () {
t1.reversed(!t1.reversed());
});
This looks like jQuery, so you need to add the jQuery library or convert this to vanilla js.
You can't use $(document).on without importing JQuery.
You either need to import JQuery, or find another solution without using $(document).on
Replace this:
$(document).on("click", ".toggle-btn", function () {
t1.reversed(!t1.reversed());
});
with this:
document.addEventListener('click', function(event) {
if (event.target.classList.contains("toggle-btn")) {
t1.reversed(!t1.reversed());
}
});