scroll cards like ios notification on lockscreen

[vadimLyashko]

how I can animate my cards like ios notification on lockscreen, attached example scroll 

I need to make exactly the same card scroll animation
position, transparency, movement, all this should be as similar as possible to the example

 

[mvaneijgen]

Hi @vadimLyashko welcome to the forum!

 

What have you tried already? 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!

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Check out my post about creating any stacking card effect, should give you some tools to try to create your own! Especially check the collection page it has an example that does this but in reverse, so the animation in there could help you figure out your own! 

 

 

Hope it helps and happy tweening! 

 

Here is a starter template which loads all the plugins 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

[vadimLyashko]

I haven't tried to implement this scroll yet with gsap, waste a lot of time to trying use only scroll-driven, I want to see an example of a solution that will be as similar as possible to the animation of the iOS notification scroll
 

[mvaneijgen]

The beauty of GSAP is that you can build anything you like! But this does mean that there aren't just examples around that do exactly what you want. We also don't have the time and resources to create custom examples for our users, so to get the most out of this forum create a minimal demo of what you've tried and then someone will probably be able to point you in the right direction.

 

Again my examples in the post above give you a great starting off point. Keep in mind that you're creating an animation, don't worry about the scrolling part, that comes later. This demo from the examples does almost wat you want, but in reverse. 

 

Again hope it helps and happy tweening! 

 

See the Pen VYZBQpM by mvaneijgen (@mvaneijgen) on CodePen.

[mvaneijgen]

I had some time to spare an liked the challenge. Again this is not what the forum is for, so please create your demo! 

 

Hope it helps and happy tweening! 

 

See the Pen WbNKqVa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.