Rohan Jariwala Posted June 22, 2023 Share Posted June 22, 2023 Hello, I want to create a smooth slide animating product slider when I click on any of the sliders then that slider expands, and user can see all the information about that Product. we can create something like this with gsap but I don't know how? can you help me. below is the video link for a demo of the slider. check Disney character slider Link :- https://drive.google.com/file/d/1veUkCJjPXl1afhmjleRB7c3z34TB-Lxu/view?usp=sharing Link to comment Share on other sites More sharing options...
Rodrigo Posted June 22, 2023 Share Posted June 22, 2023 Hi @Rohan Jariwala and welcome to the GreenSock forums! Unfortunately we don't have the time resources to create custom and complex solutions for them. The example you show in the video is not the simplest thing to do. You might want to have a look at some of the examples in the ScrollTrigger demos page: https://greensock.com/st-demos/ Also these Codepen collections contain several examples that you can look and play with: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg In this case you could use the Flip Plugin in order to handle the expand/contract animations: https://greensock.com/docs/v3/Plugins/Flip Finally there are several examples of content sliders around in the forums so you can search here in the forums or search in Codepen or Google as well. Good luck with your project. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Rohan Jariwala Posted June 23, 2023 Author Share Posted June 23, 2023 Hi, @Rodrigo I understood. I can manage the slider move. but I have no clue about expanding animation on click and on close button it's reverse to back position. I check above that you suggest the flip plugin for expanding animation and I will try that. but do you have any example animation like I showed in the video not the same just similar animation in Codepen or any other place? Thank you. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted June 23, 2023 Solution Share Posted June 23, 2023 Hi, I cant think of an example that does exactly what you're trying to achieve, but maybe these examples can nudge you in the right direction: See the Pen abZmqgW by GreenSock (@GreenSock) on CodePen See the Pen JjXqMZK by GreenSock (@GreenSock) on CodePen See the Pen LYZYPpE by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Rohan Jariwala Posted June 24, 2023 Author Share Posted June 24, 2023 ok Thank you for help @Rodrigo Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now