How to sync horizontal and vertical scrolltriggers?

[iamruletik]

Hello! Another day, another challenge. I'm trying to replicate simple version of this page scroll animation 큰그림컴퍼니 - Bigpicture company (bpco.kr) but  can't figure out how to sync horizontal and vertical scrollables so that headline meet picture exactly at center. I thought if I gave both pins same distance in pixels it would work but in my interpretation it's not. Could you please point out what I'm doing wrong?

See the Pen WNWQbve by iamruletik (@iamruletik) on CodePen

[mvaneijgen]

Hi @iamruletik

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I would start with just the animation on a timeline and get that to work exactly how you want and only when that is done hook it to ScrollTrigger. I've just written a post how I see people start optimising their code before it is working and how this stops you from progressing.  Hope it helps and happy tweening! 

 

 

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

 

 

[iamruletik]

@mvaneijgen Thanks for the idea, I tried your approach for the animation and seems like it worked :)

See the Pen oNOYMoa by iamruletik (@iamruletik) on CodePen

[iamruletik]

@mvaneijgen Also wanted to know is there a way using ScrollTrigger to scroll to specific time in animation? I mean snapping to the sections, in my case snapping to words.

[iamruletik]

@mvaneijgen Sorry, found that there are "snap" attribute, that exactly what I need

[mvaneijgen]

Lol I was just typing this out:

 

You can snap to different progress values. Check out snap in the do https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Quote

Snap

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following...

as mentioned it snaps to progress values, eg 0 is the start of your ScrollTrigger and 1 is the end. Your total scroll distance is 6000px, so let's say you have 6 images and you want to snap to each one of them 1 / 6 = 0,1666, you you want to snap to increments of 0.1666

 

Hope it helps and happy tweening! 

[Rodrigo]

Cool animation @iamruletik, really good job 👏

[iamruletik]

6 hours ago, Rodrigo said:

Cool animation @iamruletik, really good job 👏

Thanks