Jump to content
Search Community

Elastic itemlist scroll

nqtham test
Moderator Tag

Recommended Posts

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

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/

  • Like 4
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
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...