Gallery intro animation

[IndM]

This is no question for how do I code it but just a question for helping me through this thought process.

I'm trying figuring out how this intro animation being implemented for the gallery.
I thought it were 3 seperated scrolltriggers, 1 that plays the intro animation, 1 that does the parallax and 1 that does the expension.
But everytime I reload the page and look how its being triggered, it keeps confusing me.
 

The parallax and the expension effect I can always do later, but what I really wanna know is how that first animation is being done.
What I thought it could be was a .to animation on the wrapper with a stagger animation on those images, that each has an animated y value and opacity.
But really no clue about that easing effect that is being applied.

If anyone ever tried to replicating this or have some examples, always welcome!

https://spaincollection.com/ (this is listed in the showcase tab)

[mvaneijgen]

This could be done in so many ways and the only way to figure out how it would work is to build it!  Unfortunately we don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

I would just start building and when a specific question arises, post back here with a minimal demo demonstrating the issue you're having. Hope it helps and happy tweening! 

[IndM]

Well I found this,

See the Pen qBLZEzX by shahbaz-shaikh (@shahbaz-shaikh) on CodePen

 

But on the site as you can see, there is a small delay and then all items are being animated differently. But also grouped and still animated the same... I don't get it 😛

[Rodrigo]

Hi,

 

I don't have a lot of time to dig into this now, but most likely you're looking at staggers or delay with random values:

https://greensock.com/docs/v3/Staggers

 

Have a look at that link and see if you can reduce your demo even further, no need for a bunch of images, just some colored divs would be more than enough.

 

Hopefully this helps.

Happy Tweening!

[IndM]

Hi @Rodrigo!

it seems the correct way to go but I can't figure out why it's not working here. And less a clue now how to become the effect from that site 😕

See the Pen wvRYJZN by indy-meermans (@indy-meermans) on CodePen

[mvaneijgen]

Looks great already! As I said it takes me around 10 versions to get to something I'm happy with, this is version 2, so my advice keep on going. 

 

We can help with specific questions, so if you have one please ask.

 

Personally I would build a timeline because all elements should animate in together right? Instead of having all individual tweens.

 

I would not worry about ScrollTrigger yet and first focus on getting the animation perfect before you start introducing more complexity

[IndM]

9 minutes ago, mvaneijgen said:

Looks great already! As I said it takes me around 10 versions to get to something I'm happy with, this is version 2, so my advice keep on going. 

 

We can help with specific questions, so if you have one please ask.

 

Personally I would build a timeline because all elements should animate in together right? Instead of having all individual tweens.

 

I would not worry about ScrollTrigger yet and first focus on getting the animation perfect before you start introducing more complexity

@mvaneijgen

So some kind of a different timeline just for that animation that contains a fromTo with different y values for each column (due each column has a different y position), starting at the same time?

What I don't get is how the middle images are always first visible (on that site), then the rest. Is this due some kind of ease?

[mvaneijgen]

5 minutes ago, IndM said:

What I don't get is how the middle images are always first visible (on that site), then the rest. Is this due some kind of ease?

Don't really see that.

 

Optimising things is great, but sometimes you have to take a step back and just write out the animation by hand how you want it, this way you get a feel for what it is you want and how things should work. There is always time to optimise later. So go in and give each image a class of img1, img2, img3, ect and animate them in how you want one by one. 

 

That said, I've removed your ease from the frist tween and this already feels really nice. Something else I was thinking about is that you could have two tweens that start at the same time, one tween animates all the elements with the y and scale and the other does the opacity. Then you could have the opacity one animate random all the images from 0 to 1, but exclude the middle images (just give them some other class)

 

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

 

Something else you could also look in to is the Position-based staggers helper function, maybe that is the magic bullet? 

 

See the Pen gyWrPO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Again hope it helps and happy tweening! 

[IndM]

15 minutes ago, mvaneijgen said:

Something else you could also look in to is the Position-based staggers helper function, maybe that is the magic bullet?

It was indeed the magic bullet!
This was exactly what I needed, thanks!

See the Pen poqxPMw by indy-meermans (@indy-meermans) on CodePen