mabdelra

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!

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!

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

Hi @Rodrigo, thank you for your help with the codepen it should work now, the link is https://codepen.io/mabdelra15/pen/BaxJdZK 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

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