[FEATURE] Animation in Feature section

[Monilprajapati]

Is this a unique feature?

• I have checked "open" AND "closed" issues and this is not a duplicate

Is your feature request related to a problem/unavailable functionality? Please describe.

The feature section is perfect; there are no issues with it. However, it looks like a static website. To make it more user-friendly, we should make it appear dynamic.

Proposed Solution

To make it dynamic, I am going to use framer motion, which will make it attractive and dynamic. If you approve, I would like to incorporate different types of animations in various sections of the entire website.

Screenshots

Current feature section:

before.mp4

After adding animations:

after.mp4

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this

As mentioned earlier, I will be utilizing Framer Motion and creating a common variants.js file to store all the animation variants. This way, we can easily use them in any file. @eddiejaoude I have been a part of this community for a long time, and I have been considering making contributions. Unfortunately, I haven't been able to find the time for it.

[github-actions]

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

[eddiejaoude]

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

[Monilprajapati]

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.

[Balaji-Batchu]

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. 🎉

[Monilprajapati]

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!

[eddiejaoude]

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

[Monilprajapati]

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?

[Monilprajapati]

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

[Monilprajapati]

Hey @eddiejaoude !! @sital002

[eddiejaoude]

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

[github-actions]

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

[Monilprajapati]

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.

biodrop.mp4

[Monilprajapati]

@eddiejaoude Please look into it!!

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

[eddiejaoude]

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

[Monilprajapati]

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.

[Monilprajapati]

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

[Monilprajapati]

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

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

[eddiejaoude]

PR merged

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