Jump to content
Search Community

Animating a draggable element

tomsah test
Moderator Tag

Recommended Posts

Hello GreenSock community ūüėÄ
hope you are well and keeping safe!!!

I am trying to build a draggable carousel,

which when you click an element it expand and animate its content in,

other element shrink accordingly.

And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag.

So far I have a responsive draggable carousel in React;  essentially @OSUblake  draggable carousel example but using react (Thanks @OSUblake !!!)

See the Pen vYKqqVx?editors=0010 by tomsah (@tomsah) on CodePen

I have created the basic animation that I would like to happen when a user click one of the carousel item

See the Pen WNxqqEz by tomsah (@tomsah) on CodePen


I have tried a few things¬†and I never get the result I am after¬†ūüĎÜ,¬†

Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse

I am not sure how to properly update the carousel item with, X & left value properly, 
and how would I pass the animation to the next item dragged element.

Thank you in advanced for your help and time

See the Pen 1e13ae4d1583c9a7157b46b995345872 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

We love answering GSAP-specific questions around here but unfortunately we don't have the resources to provide free general consulting or troubleshooting for logic issues or complex implementations. This kind of project is absolutely doable for sure with Draggable and GSAP, but you may need to either hire a consultant or break things down into very simple chunks that focus on a particular GSAP-related question that we can help with. For example, maybe just 3 divs that expand when clicked like you have, and then if there's a GSAP-specific issue that you think isn't behaving properly, point that out in the simple demo and we'd love to jump in and offer advice. We definitely will fix any bugs related to GSAP, but it doesn't sound like that's what is at play here. 


I wish we had more time and resources to help everyone with their complex projects for free. But again, breaking it down into bite-sized chunks will probably be the best path forward if you still need some help (or just hire a consultant). 

  • Like 1
Link to comment
Share on other sites

Hi @GreenSock, 

I am sorry that it comes across that I want the GreenSock community to do my project for me or something like that.
I was not expecting at all to have someone to do it for me, or just sending me the animation done and I don't think that is what I was asking. 
Sorry, if it did sounds that way.

I was trying to be helpful (looks like I failed) by providing two simple Codepen (this is not the full project by the way), to illustrate and give some context of my issue and my goals.
I provided an extracted carousel which is essentially based on a GreenSock example, not sure how to simplified this if you need to share a draggable carousel 
and the smallest animation possible of what I am after.


The real question was I think a GreenSock question on how to add an animation to an element in draggable GreenSock carousel and keeping everything in sync.


I have read a lot of the forum threads, and I came across much more complex examples in many other answered posts in my opinion.


I will end up finding a solution but not as quickly and less fun on your own than discussing with others.

So, I will keep trying and reading the forum.



Anyway, Thank you for taking the time to answer back to me.
Happy tweening!

Link to comment
Share on other sites

No worries. And I totally recognize and respect the fact that you DID provide 2 CodePens. Thank you! And I didn't mean to imply that you're not welcome to post questions like this in the forums - it's totally fine if other people want to jump in and collaborate. I just wanted to set expectations properly because we really try to bend over backwards to answer all the questions in these free forums but it can get overwhelming when the questions end up being about working through all the logic issues in someone's project and teaching them how to accomplish a somewhat advanced effect rather than answering questions about the GSAP tools themselves, that's all. 


So again, it's totally fine to post here - just please don't expect an answer from the GreenSock team. 


In your project, it's a logic issue relating to the fact that you'll be changing the overall width of everything in the expanded state, thus you'd have to account for that in all the dragging/scrolling calculations and make it all dynamic because users may click really fast multiple times or start dragging before things are done expanding/contracting, etc. Totally doable, but it's not the type of thing we can just spend 5 minutes on and say "here's all the logic for ya" :) (not that you were expecting that). 


If others have time and want to jump in here because it's a fun challenge, awesome. I genuinely wish I had more time to spend on things like this because I love challenges :)

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...