Jump to content
Search Community

i have created this design but when i click on arrow it is not playing well on click of particular button

Priksha Kashyap
Moderator Tag

Recommended Posts

Priksha Kashyap
Posted
'use client'
 
import { useEffect, useState } from "react";
import $ from "jquery";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/ScrollTrigger";
 
gsap.registerPlugin(useGSAP, ScrollTrigger);


 
const BubbleServiceSection = () => {
const [activeService, setActiveService] = useState("");
useGSAP(() => {
const buttons = $(".services__button-logo.is-arrow");
 
 
if (buttons.length === 0) {
console.error("No buttons found for animation.");
return;
}
 
const shuffleAndSlice = (container: JQuery<HTMLElement>, count: number) => {
return container
.find(".tag__item")
.get()
.sort(() => 0.5 - Math.random())
.slice(0, count);
};
 
 
const hideTags = (container: JQuery<HTMLElement>): gsap.core.Tween | undefined => {
const items = container.find(".tag__item:not(.hidden)");
if (items.length === 0) {
// Return early if no items are found
return undefined;
}
return gsap.to(items.get(), {
y: 50,
opacity: 0,
duration: 0.5,
stagger: 0.05,
ease: "power2.in",
});
};
 
const showTags = (container: JQuery<HTMLElement>) => {
const items = container.find(".tag__item:not(.hidden)");
if (items.length === 0) return;
gsap.set(items.get(), { y: -50, opacity: 0 });
return gsap.to(items.get(), {
y: 0,
opacity: 1,
duration: 0.5,
stagger: 0.05,
ease: "power2.out",
});
};
 
const switchTags = (serviceName: string) => {
// console.log("serviceName", serviceName, "activeService", activeService);
 
 
if (serviceName == activeService) {
const currentList = $(`.tag__list[data-name-services="${activeService}"]`);
if (currentList.length > 0) {
hideTags(currentList).then(() => {
showTags(currentList);
});
 
}
return;
}
console.log("before",activeService);
 
const tl = gsap.timeline();
const currentList = $(`.tag__list[data-name-services="${activeService}"]`);
console.log("after",activeService);
const newList = $(`.tag__list[data-name-services="${serviceName}"]`);
console.log("newList", newList, "currentList", currentList);
 
 
if (currentList.length > 0) {
const hideTween = hideTags(currentList);
if (hideTween) {
tl.add(hideTween);
}
tl.set(currentList.get(), { display: "none" }, ">");
}
 
if (newList.length > 0) {
tl.set(newList.get(), { display: "flex" }, ">");
newList.find(".tag__item").removeClass("hidden");
const showTween = showTags(newList);
if (showTween) {
tl.add(showTween);
}
}
// console.log("setActiveService",serviceName);
 
setActiveService(serviceName);
};
 
const defaultList = $('.tag__list');
if (defaultList.length > 0) {
defaultList.css("display", "flex");
const selectedItems = $(shuffleAndSlice(defaultList, 5));
defaultList.find(".tag__item").addClass("hidden");
selectedItems.removeClass("hidden");
showTags(defaultList);
}
 
buttons.on("click", function () {
const serviceName = $(this).attr("data-name-services") as string;
// console.log("serviceName",serviceName,this);
 
switchTags(serviceName);
});
}, [activeService]);
 
return (
<div className="page-wrapper">
<main data-barba-namespace="home" data-barba="container" className="main-wrapper">
<section className="section">
<div className="container">
<div className="services__wrapper">
<div className="services__button__wrapper">
<div className="button-rotate__wrapper">
{["SaaS", "Start-up", "Agences"].map((service) => (
<div key={service} className={`services__button-block is-${service.toLowerCase()}`}>
<div
data-name-services={service}
className="services__button-logo is-arrow"
>
<div className="icon-arrow is-large is-rotate">Swipe Up</div>
</div>
{Array.from({ length: 4 }, (_, i) => (
<div key={i} className="services__button-logo">
<div className="rotate">span {i + 1}</div>
</div>
))}
</div>
))}
</div>
<div className="services__title__button">
{["SaaS", "Start-up", "Agences"].map((service) => (
<div key={service} className="title__button__rotate">
<div className="text-size-large">{service}</div>
</div>
))}
</div>
</div>
</div>
</div>
</section>
</main>
</div>
);
};
 
export default BubbleServiceSection;

image_2025_01_11T06_56_15_832Z.png

image_2025_01_11T06_56_03_851Z.png

GSAP Helper
Posted

Here are some tips that will increase your chances of getting a relevant answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

GSAP Helper
Posted

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...