Question about horizontal scroll section

[Sam Tremblay]

Sup people of GSAP 🖖

 

First of all, sorry for my bad english hehe.. I'll try my best, but it's sure I'll make some mistakes.

 

I'm starting a website with a horizontal section that you can see here. (For now, it's done only for a screen width 1920px so please, visit the site with this viewport dimension.)

 

If you are ok with that, I'll not props my codes on a codepen because I think you need the entire website. In other hand, because I think the codepen box is too small right now for my non-responsive website.

 

Looking at the site, we can see that the elements in the horizontal section always appear later and later as we scroll down. On the other hand, the section ends at the right moment, with all the elements placed correctly.

 

Could you please help me to understand that? I have see multiples discussions on this forum and stackoverflow, but I can't catch.

 

For help you to understand my result, here is my codes:

 

HTML/PHP

<div class="list">
	<div class="track">
		<?php foreach(scg::field('content_about_list') as $item){ ?>
			<div class="item">
				<div class="int">
					<div class="top">
						<div class="contents">
							<span><?= $item['title']; ?></span>
							<div class="text">
								<?= $item['text']; ?>
							</div>
						</div>
					</div>
					<div class="bottom">
						<?= scg::button(
								$item['button']['text'],
								[
									'href' => $item['button']['page'],
									'class' => 'reverse circle',
									'after' => '<div class="pin"></div>'
								]
							);
						?>
					</div>
				</div>
			</div>
		<?php } ?>
	</div>
</div>

 

SCSS

.list{
	opacity: 0;
	margin: 180px 0 0;
	padding: 0 0 160px;
	will-change: transform, opacity;
	.track{
		display: inline-flex;
		white-space: nowrap;
		column-gap: 30px;
		will-change: transform;
		.item{
			background: var(--orange-n1-color);
			display: inline-block;
			width: 1035px;
			height: svh(820px);
			flex: 0 0 1035px;
			padding: 0 50px 44px;
			border-radius: 60px;
			white-space: initial;
			will-change: transform;
			transform: translate(0, 160px);
			.int{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				height: 100%;
				align-content: space-between;
				.top{
					width: 100%;
					max-width: 822px;
					margin: 125px 0 0 50px;
					.contents{
						& > span{
							display: table;
							font-size: 60px;
							line-height: 80px;
							color: var(--blue-n2-color);
						}
						.text{
							margin: 20px 0 0;
							p{
								font-size: 24px;
								line-height: 140%;
								color: var(--blue-n2-color);
							}
						}
					}
				}
				.bottom{
					width: 100%;
					.btn{
						margin: 0 0 0 auto;
					}
				}
			}
			&:nth-last-child(1){
				background: var(--white-color);
			}
			&:nth-last-child(2){
				background: var(--orange-n3-color);
			}
			&:nth-last-child(3){
				background: var(--orange-n2-color);
			}
		}
	}
}

 

JavaScript

class Front{
    
	about(){
		
		const section = document.querySelector('main:last-child #h__about');
		if(!section) return;
		
		
		const list = section.querySelector('.corps .list');
		const track = list.querySelector('.track');
		const items = track.querySelectorAll('.item');
		
		const toMove = track.getBoundingClientRect().right - list.getBoundingClientRect().right;
		
		gsap.set(section, {
			height: '+=' + toMove
		});
		
		ScrollTrigger.refresh();
		
		const horizonTween = gsap.to(track, 1, {
			x: -toMove,
			scrollTrigger: {
				trigger: track,
				endTrigger: section,
				start: 'center center',
				end: 'bottom bottom',
				scrub: true,
				pin: list,
				pinSpacing: false
			}
		});
		
		
		gsap.to(list, 1, {
			opacity: 1,
			scrollTrigger: {
				trigger: track,
				start: 'top bottom',
				end: 'center center',
				scrub: true
			}
		});
		
		
		items.forEach(item => {
			
			gsap.to(item, 1, {
				y: 0,
				scrollTrigger: {
					trigger: item,
					start: 'left ' + list.getBoundingClientRect().right,
					end: 'right ' + list.getBoundingClientRect().right,
					containerAnimation: horizonTween,
					scrub: true,
					markers: true
				}
			});
			
		});
		
	}

}

export default Front;

A really big thank you in advance 🙏

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Sam Tremblay]

*%$# it, close that.

 

Long gone are the days when people could help out without having to transfer everything to codepen 😤

[mvaneijgen]

Hi @Sam Tremblay, sorry that you feel that way. We love to help everyone here on these forums and not having an easy way to thinker with the code makes it that much harder to help you. That is why we ask our users for a minimal demo, it is a way to help us, help you! I get it can be frustrating when you're on a dead line and something is not working. My workflow debugging this would be to remove all unnecessary code and remove the ScrollTrigger logic and just see what the animation of the boxes are doing, but there is just no way for us to modify the code on a live website and thus no way to help you debug.

 

I personally also work in PHP, but all my animation start out on Codepen. I find it just so much easier to have a place which is just pure HTML, CSS and JS and worry about the logic that needs to happen, so when in comes time to integrate it in my framework of choice I can easily fall back on the basic version that I know is working, bonus you have an easy version you can share if things are not working! 

 

Again we love to help, so hope you'll be able to create a minimal demo, because it looks like a cool animation! 

[Rodrigo]

Hey Sam,

 

I'm on my phone now so no chance at looking at the site.

 

On a quick glance at the snippet you posted, I see that in your horizontal tween you're using the default easing function which is power1.out, that will make the motion start fast and end slow. When mimicking horizontal scroll always use ease none (see the ease visualizer on our learning center).

 

Give that a try and let us know how it goes 

Happy Tweening!

[Sam Tremblay]

11 minutes ago, Rodrigo said:

Hey Sam,

 

I'm on my phone now so no chance at looking at the site.

 

On a quick glance at the snippet you posted, I see that in your horizontal tween you're using the default easing function which is power1.out, that will make the motion start fast and end slow. When mimicking horizontal scroll always use ease none (see the ease visualizer on our learning center).

 

Give that a try and let us know how it goes 

Happy Tweening!

You are god! Works super good without ease 💪

 

From your phone too, you're magic!

 

 

Thanks!

[Sam Tremblay]

41 minutes ago, mvaneijgen said:

Hi @Sam Tremblay, sorry that you feel that way. We love to help everyone here on these forums and not having an easy way to thinker with the code makes it that much harder to help you. That is why we ask our users for a minimal demo, it is a way to help us, help you! I get it can be frustrating when you're on a dead line and something is not working. My workflow debugging this would be to remove all unnecessary code and remove the ScrollTrigger logic and just see what the animation of the boxes are doing, but there is just no way for us to modify the code on a live website and thus no way to help you debug.

 

I personally also work in PHP, but all my animation start out on Codepen. I find it just so much easier to have a place which is just pure HTML, CSS and JS and worry about the logic that needs to happen, so when in comes time to integrate it in my framework of choice I can easily fall back on the basic version that I know is working, bonus you have an easy version you can share if things are not working! 

 

Again we love to help, so hope you'll be able to create a minimal demo, because it looks like a cool animation! 

Thank you for what you say @mvaneijgen ! This gives me the idea of creating my animations first on codepen so that I can share them later 💪