Image slider from top to bottom with transition every 5 seconds

[Louienator]

I saw this post saw the small number in the example of pietM the transition that i wan to achieve is like the once on the lower left number, the small one.. it will automatically slide and change image from top to bottom.

Here's the sample link from PietM

 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or"how do I recreate this cool effect I saw?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

[Louienator]

Oh yeah,  i forgot to add my code here. apologies. I want the image on the right will have have a carousel effect that will scale down half size and and opacity will be 0 if it's not active..

 

 

https://jsfiddle.net/abkLmyrv/3/

[mvaneijgen]

I've moved your code to Codepen and removed all unnecessary code for this demo. What I would do is have all elements at the position where they need to be (eg in de middle of the box) and then move them to where you want them to come from or to go with GSAP, this makes managing the timeline code much simpler. I've thrown a simple CSS grid over lap each item in your CSS, so all images are on top of each other.

 

Now there are two tweens in this animation one moving the images down from off screen and the other also moving them down from where they are (and scaling them), both these animations start at the same time with the position parameter ("<"). They use staggers, so they will animate one  by one, but because the first and last don't tween every thing lines up.

 

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

 

If you want to learn more about these kind off fancy staggers check out @Carl tutorial on YouTube. Hope it helps and happy tweening! 

 

[Louienator]

hi Mvaneijgen,

 

Thanks for the solution, i'm basing on this xd design, this is what i was going to achieve for this is my current project. i'm planning to go full gsap if i can achieve this slider within a slider. but if now, i'll just stick to my solution that's slick on the main and gsap on the inner slider that will change every 5 seconds. you could also see the carousel effect in that xd..

 

UI reference

https://xd.adobe.com/view/b1154e9f-e4e5-43bb-bf20-42c078949efe-e446/

 

Cheers