Scroll trigger

[Shunt]

Hey there, somewhat of a Gsap noob here, learning slowly but surely and loving everything i see about it.

 

I'm trying to adapt this pen: https://codepen.io/GreenSock/pen/oNjgEjm

Such that it goes from one storefront to another, vertically rather than horizontally.

I've managed to do that just fine, but when I try to add a third storefront to do the same it does not.

 

The transition from colour-pop to g-fuel, works exactly as intended, but the transition from g-fuel to gymshark scrolls down from the top, instead of unveiling itself.

 

Can anyone see what I'm doing wrong?

 

Many thanks,

Shunt

See the Pen wvGLopZ by simontronik (@simontronik) on CodePen

[akapowl]

 

Hey @Shunt ... welcome to the forums

 

 

On 10/1/2020 at 1:58 PM, Shunt said:

Can anyone see what I'm doing wrong?

 

The one thing that's throwing everything off in your approach is the position-parameter in your timeline.

You are telling the tweens for that last image to play at 0, so the very beginning of the timeline.

 

Change the 'start-position' to 0.5 for example - so half way into the timeline in this case - and you are good to go.

 

tl
.fromTo(section.querySelector(".afterImage"), { yPercent: -100, y: 0}, {yPercent: 0})
.fromTo(section.querySelector(".afterImage img"), {yPercent: 100, y: 0}, {yPercent: 0}, 0)  
.fromTo(section.querySelector(".afterafterImage"), { yPercent: -100, y: 0}, {yPercent: 0}, 0.5)
.fromTo(section.querySelector(".afterafterImage img"), {yPercent: 100, y: 0}, {yPercent: 0}, 0.5)
;

 

 

Is this better?

 

See the Pen 6afedc5741c8f9ae0bc723142536a3f4 by akapowl (@akapowl) on CodePen

 

 

 

[Shunt]

I just facepalmed so unbelievably hard. Thank you so much!!