Hitendra

Is there any way we can add classes when the accordion open?? so that we can style the active accordion

Thanks a lot @Rodrigo the reason i'm not playing with the viewbox of the svg is that i also have hotspot dots for showing info about the particular point. but i have figured out a way thankyou!!

@GSAP Helper Thankyou! for the response and guidance i have follwed your instructions and forked my code into the aboce started codepen block please look and provide appropriate help https://codepen.io/hitendra1396/pen/PoxoNBN I have added the input range on the top-left cormner of the demo when you will drag the button the image will zoom-in alongwith the image the cursor will also get scaled which i don't want I just want to make the image scaled buigger and want the cursor to remain with the same size

@CommunityPL any help will be highly appreciated

Hello Community I have used the same code in my webflow site but i have added zoom in and zoom out functionality to the image on the input type=range drag. When the whole image gets zoomed-in the cursor also gets bigger and I'm not able to keep the size of the cursor same as it was without zoom in below i'm sharing you the previewlink of my project

Thaankyou @mvaneijgen for the perfect solution!!

The section is scrolling horizontally in all other broiwsers but in safari it goes down with blank space. Can anyone help me with this? I have used this same script with minor modifications in my webflow project . Here is the script: <script type="text/javascript"> if($(window).width() > 992){ let pe_events = $(".pe-events"); if (pe_events.length) { let pe_event_list = $(".pe-events__item"); let events_wrapper = $('.pe-events__wrap'); pe_event_list.last().addClass('mr-0'); if (pe_event_list.length === 2) { events_wrapper.addClass('empty'); } else { var events_duration = 1, events_tl = gsap.timeline({ scrollTrigger: { trigger: ".pe-events", pin: true, scrub: 0.2, start: () => "bottom bottom", end: () => "+=" + document.querySelector('.pe-events__wrap').offsetWidth / 2, invalidateOnRefresh: true } }); function getValue() { let containerWidth = events_wrapper.parents('.container').width(), sideOffset = (window.innerWidth - containerWidth) / 2, percentTranslate = 100 - ((containerWidth + sideOffset) / events_wrapper.width() * 100); return percentTranslate; } events_tl.to(events_wrapper, { xPercent: () => { return -1 * getValue() } , duration: events_duration, ease: "none" }); } } } </script> In apple it shows that "Can't find events_wrapper" variable

@akapowl Thankzz alot that's a great help indeed. i just have one more issue i had placed two components with same effect (one after the other ) of sticky scroll trigger but when i'm done with the scrolling of the first one it fades out instead of scrolling up any help on that?

I'm also looking for the same component in the webflow but don't know how to do this with only jquery without react can any one help me with this?