ihollarmide

Thank you. I will write a conditional logic for it.

It worked. But do you think there is a way to set a dynamic paddingRight based on device width (either desktop, tablet and phone)

Thanks. It worked!!!

I just discovered that the last element is being added to the first element in the while ignoring all margins and spacings between the elements. Is there any workaround for that?

Wow. Thank you so much. It's really what I want.

Hello there. I have a slider with 10 cards that I am trying to implement. The slider has the following characteristics: This slider has the next and previous buttons. Clicking of the next button should move the slider forward from card 1 to card 2 or from card 2 to card 3 and so on. Clicking of the previous button should move the slider backwards from card 3 to card 2 or card 2 to card 1. The progress bar should be filled as the cards are moving. Having 10 cards mean a movement from one card to another increases the progress by 10%. Being at card 1 means the progress bar has a progress of 10% and card 10 means a completely filled progress of 100%. Here are the tricky parts, 1. When the slider reaches card 10 on forward movement, it should automatically slide forward to card 1 and update the progress bar to 10%. 2. When the slider reaches card 1 on backward movement, it should automatically slide backward to card 10 and update the progress bar to 100%. The slider should be draggable because of mobile devices. Autoplay is a bonus. I would really appreciate any help of sort. Thank you all.

Thank you. It worked. The problem was with my css selector. I didn't know it had to match

I am trying to use the GSAP CSS Rule Plugin to target and animate a pseudo selector. The problem is that it doesn't detect it and logs GSAP target undefined not found to the console. I tried to get the element by logging the element to the console but it is also undefined. Here is how I am using it: import { gsap } from "gsap" import { CSSRulePlugin } from "gsap/CSSRulePlugin" const IndexPage = () => { useEffect(() => { gsap.registerPlugin(CSSRulePlugin); const titleRule = CSSRulePlugin.getRule( "span.landing__title--span::after" ) // Log titleRule console.log(titleRule). // undefined const tl = gsap.timeline(); tl.to( titleRule, { cssRule: { scaleY: 0, duration: 1 }, } ) },[]) return ( <div> <span className="landing__title--span">Hey there</span> </div> ) } export default IndexPage What am I doing wrong and how do I rectify it? Thanks in advance