Leaderboard

Hi @maoux welcome to the forum! Your in luck, it is even easier now. Check out useGSAP()!

This is mostly a structure question and hasn't really to do with GSAP. I would abstract out what are toggle and what are expended elements and then expand all the elements that are connected to the toggle. As you see in your example you don't want to expand elements that have them self content that also should expand, so the HTML structure (and CSS) is really important in this case. I've given each element data-toggle and data-expand with their respective key (eg the name on the link). Right now it doesn't close, personally I don't like it when toggles close them selfs and I think it is bad UX. What If I want to compare content one and three? You could could add a data-close and find all the elements that should close if some data-toggle is clicked, but agin this isn't really a GSAP question, but again more JS logic and is beyond the scope of this forum. Still hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BaEqJOM?editors=1101

@Chromium One of the MOST important things to us at GreenSock is cultivating a warm, smart, non-shaming community. We're widely known as having forums that are uncommonly so. Most tech communities are characterized by harsh, arrogant, shaming responses. When someone has a question, it takes a lot of humility and courage to risk posting. We get it. We really try to be compassionate and gentle. It sounds like you felt criticized and insulted. I'm very sorry if that was your experience. We actively work to avoid that; if we failed, I hope you'll forgive us. Glad we ultimately got on the same page with a solution. 🥳

Thank you very much @Rodrigo, I've managed to adapt the solution to react. I leave the link stackblitz here.

https://codepen.io/GreenSock/pen/MWRPXMr?editors=0011

Hi @tylsa welcome to the forum! If you're lost for inspiration the Codepen collection page of GSAP is a great place to gather some resources https://codepen.io/GreenSock/collections/ The following pen looks close to your example. Be sure to include a miniml demo in your next question, we love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/RwKwLWK

You can use scrollTo plugin to scroll to certain element, but because you are animating sections, you can't use them as reference. Instead, you need to wrap them in another wrapper so you can use this wrapper in scrollTo. https://codepen.io/SahilAFX/pen/jOReGmM

Another option: just use a super small data-speed: https://codepen.io/GreenSock/pen/rNbqwMQ?editors=1010

Hi, I think this is a better approach: https://codepen.io/GreenSock/pen/JjVmWKb I wasn't able to create a react version of it for technical issues on my end (ISP is super slow and creating a codepen is not as slow as a react demo on stackblitz), but porting this to react shouldn't be a really complicated task. The heart of this is on the doSlide method that takes a specific value (+1 or -1) which updates the index value. Also the difference with your approach is that this uses a fromTo instance for the next slide, regardless of the direction so that takes the clip path of the next image from the bottom to the top which makes looping possible. Hopefully this helps. Happy Tweening!

I think something like this is what you're looking for. I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/bGJxXXG?editors=0010 For React, if you have set up the useGSAP() hook correctly and your elements have the same classes and CSS everything should just be a drop in replacement from Codepen. Be suer to check out the following if you need some more guidance. If you're stuck we also have Stackblitz starter templates for all the major frameworks. Again hope it helps and happy tweening!

Thanks for the demo. In the future please add new information to new replies. Editing the first post repeatedly makes it difficult for us and others to follow the conversation. I don't know enough about swiper in react to help you with this, particularly how to reference the Swiper inside the onChange callback. However, this bare-bones example shows how to animate the active slide (change it's scale) and animate something inside it (rotate the number div) Hopefully you can find a way to apply something similar to your project https://codepen.io/snorkltv/pen/WNmzezX?editors=0011

I really didn't plan on going down this path, but my curiosity got the best of me. Although, this is mostly functioning and you can pin the Swiper section AND navigate it with the scrollwheel and via swiping, I really don't think it's ready for use in the real world. My thoughts are listed in the demo. The short version is: Locking the scrollbar is asking for trouble. Best viewed in a new window: https://codepen.io/snorkltv/pen/QWzwmjJ

*I would very much advise against hiding the scrollbar for accessibility reasons though. Also you don't have to visually have panels with containerAnimation. You can style the panels however you want, or even just have one container animating along the x axis. https://codepen.io/GreenSock/pen/poLpxyN