[Using GSAP with react on mapped components to toggle them onClick]

Hi Jack, Thanks again for your help!

 

I am quite lost at the ._ notation syntax you are using in the if statements and the clean up function can you explain what that is and how come you dont need to declare the function using a const or let statement?

 

Lastly why do we need to clean up the event listeners at the end of the context function ?

 

Thank you so much again I really appreciate it!

[Using GSAP with react on mapped components to toggle them onClick]

21 hours ago, GreenSock said:

Thanks for being a Club GreenSock member! 🥳

 

I notice several mistakes:

1. You're not actually doing anything in your useEffect() - you're just returning a cleanup function that has all the logic in it. 
2. You didn't use an empty dependency array for your useEffect(), so it'll get called on every render.
3. You're not doing proper cleanup. I'd highly recommend using gsap.context() to make that easier. 

So it's mostly React-specific stuff. I'm not much of a React guy myself, but I'd strongly recommend reading this article: 

 

Here's a very quick CodePen that I slapped your code into in case it helps: 

 

 

21 hours ago, GreenSock said:

 

Good luck! 👍

Thank you so much for the fast response! i see what you mean and it works perfectly

 

I do have one more question though, how do i go about adding another onClick event that closes the modal when its clicked for the second time?

 

I really appreaciate how helpful you guys at Greensock are by far the best community I have ever been a part of!

[Using GSAP with react on mapped components to toggle them onClick]

Hi guys im trying to animate an FAQ component in react the animation works in my localhost however when i initiate a build and host it on netlify it no longer works and the faq stays in its expanded state, im using tailwindcss for the styling if you want to copy the code directly, sorry if this is messy im still unfamiliar with using codepen to provide a demo especially for react since im only starting to learn it now 😕.

 

import { useEffect  } from "react"
import { useRef } from "react"
import gsap from "gsap"
import SplitText from 'gsap/SplitText'
gsap.registerPlugin(gsap, SplitText)


const questions = [
    {
        title: 'question?',
        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis modi qui non ullam hic maxime veritatis et nemo eius nihil eos rem, asperiores nulla aspernatur quisquam eaque officiis atque odit?',
        id: 1,
    },
    {
        title: 'question?',
        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis modi qui non ullam hic maxime veritatis et nemo eius nihil eos rem, asperiores nulla aspernatur quisquam eaque officiis atque odit?',
        id: 2,
    },
    {
        title: 'question?',
        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis modi qui non ullam hic maxime veritatis et nemo eius nihil eos rem, asperiores nulla aspernatur quisquam eaque officiis atque odit?',
        id: 3,
    },
    {
        title: 'question?',
        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis modi qui non ullam hic maxime veritatis et nemo eius nihil eos rem, asperiores nulla aspernatur quisquam eaque officiis atque odit?',
        id: 4,
    },
]



const Faq = () => {
    const app = useRef([])

    useEffect(() => {
        return () => {
            let active
            let faq = document.querySelectorAll('.question');

            faq.forEach((element) => {

                let answer = element.querySelector('.answer')
                let animation = gsap.timeline({})
                .to(answer, {
                    opacity: 0,
                    visibility: 'invisible',
                    duration: 0.05
                })
                .to(answer, {
                    height: 0,
                    duration: 0.4,
                    ease: 'power3.inOut'
                },'<+100%')

                element.animation = animation
                element.addEventListener('click', function(){
                    if(active){
                        active.animation.play() // reverse (close) active element's animation
                    }
                    
                    element.animation.reverse() // play (open) the clicked element's animation
                    active = element
                })
            })
        }
    })

    return(
    questions.map(item => {
        const {title,id, answer} = item;
        
        return (
        <div className="question"  key={id} ref={(index, element) => app.current.splice(index, 1, element).push(element)}>
            <div key={id}  className='mb-5  border text-white border-line-rule  hover:border-btn-clr hover:text-btn-hvr hover:transition-[350ms] hover:bg-btn-bg rounded-xl py-4 px-4 flex flex-col items-center justify-between'>
            <button className='closeBtn flex  py-2 justify-between items-center 2xl:text-2xl 2xl:py-2.5 w-full'>
                <h3>{title}</h3>
                <div className='close'>
                <svg data-accordion-icon className="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" ></path></svg>
                </div>
            </button>

            <div className='answer border-t border-line-rule'>
                <div className='py-5'>
                    {answer}
                </div>
            </div>
        </div>
    </div>)
    })
    )
}

export default Faq

 

 

 

[Gsap Scrollsmoother not working with tailwind css]

On 10/2/2022 at 2:00 AM, GreenSock said:

Hi @mabdelra. Sorry for the delay. The problem with your CodePen is that you specified a wrapper and content that didn't exist. You forgot to wrap all your content in a container <div>. Please see the docs for details. Here's a fork where I just added those wrappers in: 

 

 

 

Yes thank you so much!

 

 

[Gsap Scrollsmoother not working with tailwind css]

Hi @Rodrigo, thank you for your help with the codepen it should work now, the link is 

See the Pen BaxJdZK by mabdelra15 (@mabdelra15) on CodePen

  

 

As you can see, whenever i change or add the data-speed attribute it just changes the position of the div on the viewport instead of slowing the scroll of it

 

[Gsap Scrollsmoother not working with tailwind css]

Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. 

 

Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue.

 

https://codesandbox.io/s/zen-lake-pxlpm0