nqtham Posted June 24, 2021 Share Posted June 24, 2021 Hi, I'm newbie with GSAP, but very interesting in it.Thank for create amazing library. What i try to do now is create the elastic item animation when we swipe over the item list. Something that similar to this https://dribbble.com/shots/7900992-Olympic-Sports-Website (only focus on the card movement when swipe left or right) My first idea: - Using Draggable to create the swipe/scroll item list - Using stagger props to animate item one by one on swipe action But i dont really know how to start it, there are many new things here for me with GSAP Can you give me some hints or example to archive this? Thanks Link to comment Share on other sites More sharing options...
Cassie Posted June 24, 2021 Share Posted June 24, 2021 Heya @nqtham Welcome! Just a note that as you said you're a newbie, this will be jumping right in at the deep end. If this is a project you've set yourself to learn GreenSock, I'd probably start off with creating a timeline animation that looks similar, experimenting with easing to get that elastic feel and then hooking up the left and right buttons to that timeline's progress. If you want to jump right in with Draggable/Slider interactions... Here's a slider that will set you off in the right direction See the Pen RwKwLWK by GreenSock (@GreenSock) on CodePen And an article to read more about how it works https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/ 4 Link to comment Share on other sites More sharing options...
nqtham Posted June 25, 2021 Author Share Posted June 25, 2021 Hi, Thank you for sharing the idea/document, this interesting but seem complex to me to start Back to my target, i try to create the moving elastic first, and below is what i play around so far See the Pen XWMveJG?editors=1010 by nqtham68 (@nqtham68) on CodePen Although i apply the default ease or my custom one but if far to look and feel as in sample on Dirbble. It seem that this animation contain at least 2 child animation (1 for moving card - that i try to reproduce above, and 1 for rotate card a bit when it start to move), how i can combine anim? using the timeline? And for general, is there any proper way to analyze 1 animation (from video, gif,...) and apply these to gsap? 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 25, 2021 Share Posted June 25, 2021 This is a brilliant start! Great job. And yep, you'll be wanting to use a GreenSock timeline with multiple tweens positioned on it! You can read more here - https://greensock.com/docs/v3/GSAP/Timeline In terms of analysing videos - I often save them and slowly scrub through them to get an idea of what's happening. As with all things, with practice this gets easier and you start to notice common techniques. 3 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