ScrollTrigger - Pin an element and animate him in the same time

[Simon.Gioffredi]

Hi,

 

I am trying to do an animation where a background image should pin (like forever), grow for some time and then the menu appear on it (and some other things possible).

 

When I use 1 ScrollTrigger to do it, I can't really manage the moment where the content should appear. 

 

If I use 2 Scrolltriggers (the first to pin, the second to animate the img), the second one wait for the first to finish.

 

Do you have any idea ?

 

I think I can handle this with a translateY on content and add the height of the content to the pin, but I'm not sure that's the good thing to do

 

Thx

 

See the Pen eYMWmow by simon-gioffredi (@simon-gioffredi) on CodePen

[Cassie]

Heya!

This doesn't sound right to me -

Quote

When I use 1 ScrollTrigger to do it, I can't really manage the moment where the content should appear. 

Do you know about the position parameter and timelines?

If not I suggest you reverse back up a bit, focus on looking at timelines and the position parameter and create the animation you're after without using scrollTrigger. Then take a look at scrollTrigger.

It's hard to advise further because there's many ways for content to appear, and many ways to get scrollTriggered animations to play in sequence. Let's just focus on timelines for now and if that's not helpful maybe you can give me a little more information to work with?

[Simon.Gioffredi]

Hi Cassie

 

Yes, I know this parameter. Anyway, the timeline isn't the real problem (I think). That's juste an animation which put the img in full height and width.

if I use the timeline alone, the image goes full like I want.

 

My concern is more about ScrollTrigger here.

 

What I want, in order : 

• Start : Pin the image for all the rest of the scroll (I want the image to be in the background)
• Start : Animate the image (she starts little and the more we scroll, the more she grows)
• When the anim is over : I want to have some scroll (adding like a delay of 150px)
• After this "delay" : My content should go above the image 

 

I don't know if that's clear enough.

 

Thx  

[mvaneijgen]

Is something like this what you're looking for? I've placed the element `.menu-item` overneath the image element and then animate it `.from()` a position a arbitrair location (`1200px`, I would maybe try an get that dynamically based on the height of the screen). I've also `.add()` empty function with a position parameter that delays the next animation.

 

 

See the Pen OJvmMNb?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Simon.Gioffredi]

@mvaneijgen I think you didn't add the good Codepen link ?

[mvaneijgen]

Ah I see I add the wrong link. I've updated my post. 

[Simon.Gioffredi]

I was wondering if that was the best thing to do because that's need "a lot" of calcul.

 

I think that can work, i'm gonna try it, thank you  

[Simon.Gioffredi]

I managed to did it like that 

 

In my website, I also calculate when the content can show, with an onUpdate in the timeline.

 

I think that's not perfect, because that's not very accurate, but that's gonna be enough.

Thx