Pin sections in one place without scrub or layer

[pysilla]

I wanted to achieve a feeling of scrolling red sections in one place. After scrolling whole height of first section we would go to the next red section and scroll its height as well, and so on until the end of sections. 

 

I am not sure what am I missing.

 

Demo:

https://codesandbox.io/s/still-dust-jn57ll?file=/src/App.js

[pysilla]

I would be very thankful for every given hint

[Rodrigo]

Hi,

 

Sorry for the late response. I'm not sure I follow your description of what you're trying to achieve.

 

Maybe something like this:

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen.

 

Also when using GSAP in React apps/environments we strongly recommend using GSAP Context for easy scoping and even easier cleanups:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally have a look to the resources in this page:

 

Hopefully this helps.

Happy Tweening!

[pysilla]

Thank you for the reply. I was thinking of something a bit else. I almost got to desired version here:

 

https://stackblitz.com/edit/vitejs-vite-dpegxw?file=src%2FApp.jsx,src%2Findex.css,src%2Fmain.jsx

 

But the animation triggers right from the top of screen and not when it reaches pinned section. Could you help me with that ?

[mvaneijgen]

Hi @pysilla after ScrollTrigger was created I put in the following line to see what was going on and saw you where creating multiple ScrollTriggers for each section.

 

ScrollTrigger.defaults({
  markers: true,
});

Personally I like to keep things simple. I already have a ScrollTrigger, so why not hook the animation to that ScrollTrigger, then I can just add all the tweens to that timeline and I'm done!

 

So that is what I did, I moved your on update function to be part of a timeline and with some fancy staggers I fade in and out each section on scroll.  I've set the end trigger to an arbitrary value of 5000px, but you could easily change that to something else (the height of the section times the number of sections, maybe), oh and I've set your main ScrollTrigger instance to scrub: true, so it animates based on the users scroll. Is something like that what you're looking for? Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/vitejs-vite-v38kcu?file=src%2FApp.jsx

[pysilla]

Thank you for your time, probably it could be a good alternative  

 

Like it's in the title of this thread I wanted not to use scrub

I  really wanted the exact same effect like in my demo, but the animation starts too late (starts at the begining of the page even if it should start when it reaches the pinned section).

 

Do you think you could give me sobie advice how to start animation when it reaches pinned section ? Thank you

[pysilla]

I would share modified version. Now I do not know why sections are not true for function 'isActive' at the first scroll down. On the other hand on scroll up everything seems to work fine. Do you have any ideas about it ?

 

https://stackblitz.com/edit/vitejs-vite-dpegxw?file=src%2FApp.jsx,src%2Findex.css,src%2Fmain.jsx

[Rodrigo]

Hi,

 

As @mvaneijgen mentions your current approach might be a bit more convoluted than it actually needs to be. On top of that you are creating a ScrollTrigger instance that is pinning the container of the panels before creating the ScrollTrigger instances for each panels, so basically that could be throwing off some of the calculations ScrollTrigger is making.

 

This approach seems cleaner and simpler:

See the Pen KKGwdWz by GreenSock (@GreenSock) on CodePen.

 

Here is the same code but in a React app:

https://stackblitz.com/edit/vitejs-vite-s7gry6?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[pysilla]

Wow ! That was exactly what I was looking for. Guess I just complicated things up. Thank you

[Justin Flores]

On 4/5/2023 at 6:31 AM, Rodrigo said:

Hi,

 

Sorry for the late response. I'm not sure I follow your description of what you're trying to achieve.

 

Maybe something like this:

 

 

 

Also when using GSAP in React apps/environments we strongly recommend using GSAP Context for easy scoping and even easier cleanups:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally have a look to the resources in this page:

 

Hopefully this helps.

Happy Tweening!

Hi there! Sorry im new to gsap and all this, starting to learn the ropes. So I have a 2 sections above the section where pinning would start. On page load/refresh it jumps straight to the section of the pinning. How do I prevent this?

https://lumos-template-c5c269.webflow.io/

[GSAP Helper]

Hi @Justin Flores and welcome to the GSAP Forums!

 

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. ✅

[Justin Flores]

Hey @GSAP Helper

I was able to recreate my problem on codepen, my first time using code pen forgive me lol.

This is the link

 

See the Pen OPLxqzq by Gamaliel-justin-Flores (@Gamaliel-justin-Flores) on CodePen.

When we enter the section where pinning happens, it scrolls back to the first class .panel

 

[Rodrigo]

Hi,

 

Right now the calculations in your snapTo function are always returning 0, that's why the ScrollTrigger instance always snaps to it's start point. This is far simpler and seems to work the way you intend:

ScrollTrigger.create({
  trigger: panels[0],
  start: "top top",
  endTrigger: panels[panels.length - 1],
  end: "bottom bottom",
  markers: true,
  snap: {
    snapTo: 1 / (panels.length - 1),
    duration: 0.5,
  },
});

Here is a fork of your demo:

See the Pen XJrzWYp by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[vi0xin]

Hi, i hope you all doing well

i want to achieve a same animation like this pen :

See the Pen KKGwdWz by GreenSock (@GreenSock) on CodePen.

 

but instead of scale sections i want them to be stacked , i've managed to get the onEnter animation working as expected, but I'm encountering issues with the onEnterBack animation. could you please assist me? here is what i did, sorry i didn't provide demo because I'm using Sevltekit and this section is a part of landing page I'm working on, if you need demo i will make one.

 

Thank you 🙏

 

EDIT: demo : https://stackblitz.com/edit/sveltejs-kit-template-default-rqh3ingf?file=README.md

 

// JS
onMount(() => {
		const images: HTMLElement[] = gsap.utils.toArray('.image-wrapper__img');

		images.forEach((image, i) => {
			if (images[i + 1]) {
				ScrollTrigger.create({
					trigger: scope,
					start: `top+=${100 * (i + 1)}% top`,
					end: `top+=${100 * (i + 1)}% top`,
					markers: true,
					id: `${i}`,
					onEnter: () => {
						gsap
							.timeline()
							.to(images[i + 1], {
								yPercent: -100
							})
							.to(image, {
								yPercent: 100
							});
					},
					onEnterBack: () => {
						gsap
							.timeline()
							.to(images[i + 1], {
								yPercent: -100
							})
							.to(
								image,
								{
									yPercent: 100
								},
								'<'
							);
					}
				});
			}
		});

		ScrollTrigger.create({
			trigger: scope,
			end: `+=${images.length * 100}%`,
			pin: true,
			pinSpacing: true
		});
	});

// HTML
<div class="image-outer">
			<div class="image-wrapper">
				<img src={image1} alt="" class="image-wrapper__img" />
				<img src={image2} alt="" class="image-wrapper__img" />
				<img src={image3} alt="" class="image-wrapper__img" />
			</div>
</div>

// CSS

.image-outer {
		height: 100%;
		width: 100%;
	}

	.image-wrapper {
		background-color: rebeccapurple;
		position: relative;
		height: 100%;
		width: 100%;
		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;

			&:not(:first-child) {
				transform: translateY(100%);
			}
		}
	}

 

[Rodrigo]

Hi @vi0xin and welcome to the GSAP Forums!

 

I've looked at your demo and is not really clear to me what you're trying to achieve here. Maybe these demos can serve you as a good starting point:

See the Pen zxOgLZd by GreenSock (@GreenSock) on CodePen.

 

See the Pen dPyGqpN by GreenSock (@GreenSock) on CodePen.

 

See the Pen wvYVjvb by GreenSock (@GreenSock) on CodePen.

 

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

If not, please be as specific as you can in explaining what you're trying to achieve and if possible post a URL of a site/app that has a similar animation.

 

Finally you might want to have a look at this thread by @mvaneijgen

 

Hopefully this helps

Happy Tweening!

[vi0xin]

Hi @Rodrigo, thank you so much for the demos! They help a lot. 🙏

 

the second demo is exactly what I need, but when I move a trigger to the image itself, it doesn’t work. I have updated the demo.

 

https://stackblitz.com/edit/sveltejs-kit-template-default-rqh3ingf?file=src%2Froutes%2F%2Bpage.svelte

 

the left content is fixed, but I need the first image to appear on page load, just like in the demo.

 

sorry if my question not clear, thank you so much for your time 🙏

 

 

[Rodrigo]

Hi,

 

Is a bit late and I don't have time to dig into your demo, but maybe this is more related to the way your HTML/CSS are structured rather than anything else. Maybe the approach in this demo can help understanding how to achieve that:

See the Pen RwzjmVL by GreenSock (@GreenSock) on CodePen.

 

Here is a similar approach with smaller images:

See the Pen zYXWVdw by GreenSock (@GreenSock) on CodePen.

 

The key is that the images have position absolute and are stacked on top of each other, so you should focus on getting the HTML/CSS in the way you intend and then focus on the animation, without ScrollTrigger. When you start with a project ScrollTrigger is the last part of it, first is the HTML/CSS looking and working the way you need. Then create the animation (again without ScrollTrigger) and when the animation is working the way you intend, add ScrollTrigger to the mix.

 

Hopefully this helps

Happy Tweening!

[vi0xin]

Hi @Rodrigo i have fixed the issue ,thank you so much bro i really appreciate your help 🙏.