To reduce notifications, issues are locked until they are 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

Thank you for the suggestion and demo 👍

We cannot include anymore dependencies, because we are at the maximum of files for Vercel, can this be achieved with Tailwind's "Transitions & Animation" https://tailwindcss.com/docs/transition-property

Yes, we can, but it will result in a significant amount of additional code to write. However, with just one dependency (framer-motion), we can incorporate various types of animations without having to write as much code. Therefore, I suggest considering the removal of any unused dependencies, which would be beneficial. If that's not feasible, then unfortunately, the final choice is Tailwind CSS.

Thank you for the suggestion and demo 👍

We cannot include anymore dependencies, because we are at the maximum of files for Vercel, can this be achieved with Tailwind's "Transitions & Animation" https://tailwindcss.com/docs/transition-property

Yes, for sure we can make it with Tailwind CSS by using make some Javascript code based on the viewport the animation has to be triggered with certain animation effect additionally we can use features like hover and group-hover from Tailwind CSS to make it more intrinsic UI.

Ready to work on this and excited to make my contribution. 🎉

Thank you for the suggestion and demo 👍
We cannot include anymore dependencies, because we are at the maximum of files for Vercel, can this be achieved with Tailwind's "Transitions & Animation" https://tailwindcss.com/docs/transition-property

Yes, for sure we can make it with Tailwind CSS by using make some Javascript code based on the viewport the animation has to be triggered with certain animation effect additionally we can use features like hover and group-hover from Tailwind CSS to make it more intrinsic UI.

Ready to work on this and excited to make my contribution. 🎉

Hey @Balaji-Batchu I have marked i want to work on this Issue and I am already working on it so please choose another one!

with just one dependency (framer-motion)

That is not how it works unfortunately, every dependency has its dependency which has their own dependencies and so on - it is a tree of dependencies

it will result in a significant amount of additional code to write

what is "a lot of code", can an example be shared? but please be prepared we might not move forwards with it

Hey @eddiejaoude I have done this completely with Tailwind CSS only as per your need. Now there is no need to add any dependencies.
I am having an issue with the commit. How can I do that?

Could you please assign this issue to me? I will proceed with resolving it and create a pull request once the issue is addressed.

Hey @eddiejaoude !! @sital002

I have done this completely with Tailwind CSS only as per your need. Now there is no need to add any dependencies

Great 👍 Sure I will assign it to you

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

Heyy @eddiejaoude,

I've incorporated a custom hook, useElementOnScreen, to enhance React component reusability by efficiently determining an element's presence in the viewport using the IntersectionObserver mechanism.

To apply this, I've imported the hook in index.js to monitor the existence of the feature section element:
import useElementOnScreen from "@components/useElementOnScreen";

In addition, within the Home component in index.js, I have mapped individual references to each feature section for precise handling:

const featureRefs = featuresDetails.map(() => {
    return useElementOnScreen({
      root: null,
      rootMargin: "0px",
      threshold: 0.4,
    });
  });

And these are the changes that I made in the code; I used featureRefs.

      <div className="mt-16 space-y-16">
            {featuresDetails.map((feature, featureIdx) => (
              <div
                ref={featureRefs[featureIdx][0]}
                key={feature.name}
                className="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8"
              >
                <div
                  className={`
                    ${
                      featureIdx % 2 === 0
                        ? `lg:col-start-1 ${
                            featureRefs[featureIdx][1]
                              ? "animate-fade-right"
                              : ""
                          }`
                        : `lg:col-start-8 xl:col-start-9 ${
                            featureRefs[featureIdx][1]
                              ? "animate-fade-left"
                              : ""
                          }`
                    }
                    mt-6 lg:mt-0 opacity-0 lg:row-start-1 lg:col-span-5 xl:col-span-4`}
                >
                  <h3 className="text-lg sm:text-2xl font-bold text-primary-low">
                    {feature.name}
                  </h3>
                  <p className="mt-2 text-sm sm:text-lg text-primary-low/70">
                    {feature.description}
                  </p>
                  {feature.premium && (
                    <p className="mt-2 text-xs sm:text-sm text-primary-low/50 italic">
                      (Premium feature)
                    </p>
                  )}
                </div>
                <div
                  className={`
                    ${
                      featureIdx % 2 === 0
                        ? `lg:col-start-6 xl:col-start-5 ${
                            featureRefs[featureIdx][1]
                              ? "animate-fade-left"
                              : ""
                          }`
                        : `lg:col-start-1 ${
                            featureRefs[featureIdx][1]
                              ? "animate-fade-right"
                              : ""
                          }`
                    }
                    flex-auto lg:row-start-1 opacity-0 lg:col-span-7 xl:col-span-8`}
                >
                  <div className="aspect-w-5 aspect-h-2 overflow-hidden rounded-lg bg-primary-low relative">
                    <ThemedImage
                      lightImg={feature.imageSrc}
                      darkImg={feature.imageSrc}
                      alt={feature.imageAlt}
                      className="object-contain object-center"
                      fill={true}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

Everything is working well, but whenever I am committing these changes, ESLint is giving me these warnings, and I am not able to commit it.

(node:7108) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

./pages/index.js
181:12  Error: React Hook "useElementOnScreen" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.  react-hooks/rules-of-hooks

./pages/search.js
148:6  Warning: React Hook useEffect has missing dependencies: 'BASE_URL', 'pathname', and 'replace'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
husky - pre-commit hook exited with code 1 (error)

I think ESLint is not permitting the custom hook, or is it? I have tried many things, but it still isn't working. This appears to be an ESLint issue; otherwise, it's functioning perfectly without any errors, as shown in the video. Additionally, I have included the following in tailwind.config.js for animation purposes to generalize it.

 keyframes: {
        "fade-left": {
          "0%": {
            opacity: "0",
            transform: "translateX(140px)",
          },
          "100%": {
            opacity: "1",
            transform: "translateX(0)",
          },
        },
        "fade-right": {
          "0%": {
            opacity: "0",
            transform: "translateX(-140px)",
          },
          "100%": {
            opacity: "1",
            transform: "translateX(0)",

          },
        },
      },
      animation: {
        "fade-left": "fade-left 0.7s both",
        "fade-right": "fade-right 0.7s both",
      },

So, tell me, what can I do further? I have resolved the animation issue, but now there's this ESLint error. :)

Here's the preview of what I have built.

@eddiejaoude Please look into it!!

ℹ️ Monilprajapati has some opened assigned issues: 🔧View assigned issues

Please look into it!!

Double !! is not required - I am working through notifications over the Christmas period with the family, if that is ok? 🤦‍♂️

The error is...

./pages/index.js
181:12 Error: React Hook "useElementOnScreen" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. react-hooks/rules-of-hooks

Please look into it!!

Double !! is not required - I am working through notifications over the Christmas period with the family, if that is ok? 🤦‍♂️

The error is...

./pages/index.js
181:12 Error: React Hook "useElementOnScreen" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. react-hooks/rules-of-hooks

I am so sorry 😢. I am from India so it was not in my mind that it's christmas time.

Hey @eddiejaoude , done with the animation of the feature section. Now we can move forward to add some different animations in other sections and stuff wherever you want.

ℹ️ Monilprajapati has some opened assigned issues: 🔧View assigned issues

Hey @SaraJaoude Please take a look and merge it if you find it perfect

ℹ️ Monilprajapati has some opened assigned issues: 🔧View assigned issues