Trying to implement animation on several images as a stack

[Dirtydev]

Hello Everyone,

 

Its been a week for me to jump into Animation and came across GSAP.

 

I have been trying to create an animation on mouse scroll (later on will be handle by scrollbar) where i have several images shown as stack and on scroll need to push each image vanish while it goes down one by one.

 

Basically, what i am trying to achieve is that each image should animate like it should come from the background (small) to the front (big) and should be visible to the user (as a stack of images) and then it should go out of the window screen by sliding down ( each image one by one).

 

I know I have pasted the whole code which is kind of mess but I have been juggling around trying different things available and currently it has become a mess! Apologies for the same but would really like to know if anybody has anything to suggest for the same.

 

I tried breaking the whole flow into small frames but it looked to me as not achievable by myself.

 

Thanks in advance.

See the Pen LVrgMx by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for posting the CodePen demo. Unfortunately, it would take quite a while to dig into all that code just to start to figure out what is going on.

We really have to keep our support focused on helping people understand the key mechanics of the GSAP API and much less on using the API to build out complex, custom effects.

 

Its possible one of our community members or moderators may have a similar effect laying around or can whip up a basic demo of the animation fairly quickly.

 

What I would suggest is that you separate the scroll control from the animation. I would focus first on building the animation, perhaps start with a timeline that animates each image the way you want in sequence and then tap into some scroll functionality to either drive the progress() of that timeline or call a function that handles animating the proper card in and out based on scroll position.

 

For most scroll-driven tasks we recommend the ScrollMagic library: http://scrollmagic.io/ It is a very robust API.

[Rodrigo]

Hi,

 

If your intention is to animate one image at a time, I believe this codepen by Chrysto should become very helpful (it certainly helped me in a project that required a single animation happening on a specific event):

 

See the Pen kDvmC by bassta (@bassta) on CodePen

 

As you can see Chrysto is using the scroll property with the scrollTo plugin so it's a very robust and clean solution. Hopefully it'll help you as a starting point.

[Diaco]

in addition , maybe this can help too : 

See the Pen dopxrV by MAW (@MAW) on CodePen

[Dirtydev]

Hi Guys,

 

Thanks for all the help provided! I think i will have to figure out a way , with the help from all the references provided by you guyz! 

 

Once again thanks for all the references.

 

Just for the info: http://phandroid.s3.amazonaws.com/wp-content/uploads/2015/04/Samsung-Galaxy-S6-Multi-view.jpg

 

the stack of apps looking on the left, is how i wanted my images to get loaded first and then i can scroll up and down like it is shown here!

[Dirtydev]

Hi I have updated codepen to do it through simple jquery. Is there anyway to do it through GSAP the same functionality??