ScrollTrigger to pin one of two columns and change content as other side scrolls.

[Jefe_Zebos]

Hi there,

 

As the title suggests Im trying to make a 2 column section where one columns content (an image) gets pinned at some point and as its opposing column scrolls that image changes at certain points until all content is done and then it unpins and site flow continues.

 

Now I have this working ( thanks to a couple of tutorials) in a traditional codepen however translating it to work in a nextjs project is ... troublemsome.

 

the useEffect below almost works.... but only in reverse lol.  When i scroll down to the section, the image dissapears when It should pin.... however if i scroll down and reenter the section in reverse it works as intended (but in reverse obviously).  Also the queryselectors i've had to use the classes that next generates as opposed to my inteneral naming, which im sure based on my limited knowledge is really not ideal.

 

useEffect(() => {

const details = gsap.utils.toArray(".MindmapAlt_desktopContentSection__yh948:not(:first-child)")

const photos = gsap.utils.toArray(".MindmapAlt_desktopPhoto__9t4m2:not(:first-child)")

gsap.set(photos, {yPercent:101});

const allPhotos = gsap.utils.toArray(".MindmapAlt_desktopPhoto__9t4m2");
  
ScrollTrigger.create({
trigger:"#gallery",
start:"top top",
end:"bottom bottom",
pin:"#right"
})

details.forEach((detail, index)=> {
let headline = detail.querySelector("h1")
let animation = gsap.timeline().to(photos[index], {yPercent:0}).set(allPhotos[index], {autoAlpha:0})
ScrollTrigger.create({
trigger:headline,
start:"top 80%",
end:"top 50%",
animation:animation,
scrub:true,
markers:false
})
})
console.log(details)
console.log(photos)
}, []);


the html associated to this would look something like:



<section>

<div id="gallery" className={s.gallery}>
<div className={s.left}>
<div className={s.desktopContent}>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 1</h1>
<p>lorem ipsum...</p>
</div>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 2</h1>
<p>lorem ipsum...</p>
</div>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 3</h1>
<p>lorem ipsum...</p>
</div>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 4</h1>
<p>lorem ipsum...</p>
</div>
</div>
</div>
<div id="right" className={s.right}>
<div className={s.desktopPhotos}>
<div className={s.desktopPhoto}></div>
<div className={s.desktopPhoto}></div>
<div className={s.desktopPhoto}></div>
<div className={s.desktopPhoto}></div>
</div>
</div>
</div>
  
</section>

 

Im new to development in general and this is driving me nuts, any help appreciated.

 

[GSAP Helper]

Hi @Jefe_Zebos and welcome to the GreenSock forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

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

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

 

Also you can take a look at this example:

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

[Jefe_Zebos]

Hi,  thanks for the response.  Ive created a stackblitz to recreate....

 

https://stackblitz.com/edit/nextjs-ewqtlu?embed=1&file=pages%2Findex.js

 

 

[Rodrigo]

Hi,

 

The simplest approach is to create side-by-side sections using flexbox. Then create a single timeline to control all the animations using a loop.

 

Here is a codepen example:

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

 

Here is the same example in a React setup:

https://stackblitz.com/edit/vitejs-vite-thxqgj?file=src%2Findex.css,src%2FApp.jsx&terminal=dev

 

For using React, remember to always use GSAP Context. Check the resources in this page:

 

Hopefully this helps.

Happy Tweening!

[Elia]

How can I do this with the text also on the left?

[GreenSock]

5 hours ago, Elia said:

How can I do this with the text also on the left?

It's not clear what you mean by that exactly. Can you please start a new thread and make sure you include a minimal demo with your attempt so we can see what you were trying to do? 

[Bhavin]

See the Pen JoPYZaJ by Bhavin-Raut (@Bhavin-Raut) on CodePen.

 this is my codepen i want to make similar animation like in this website https://www.kokuyocamlin.com/heritage and even my onleve is also not perfect i am using gsap for around a year still i am confused in this can you please understand me how can i achieve that? if possible

 similar on this forum also but i want half section with like that years and half with its shown content

[GSAP Helper]

@Bhavin We'd love to help, but vague details like 'it's not quite right' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo and scroll down to the grey container" 
• A minimal demo that isolates just the issue you're trying to solve.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

 

Please keep in mind that these forums aren't really intended for questions like "I want to build something just like this other web site; please show me how." These forums are about focused, GSAP-specific questions. We just don't have the resources to provide free customized help for building whatever people want. 🙂

[Bhavin]

See the Pen JoPYZaJ by Bhavin-Raut (@Bhavin-Raut) on CodePen.

 this is my codepen i have implemented it but its little not responsive in some less height devices and thats not my exact doubt my doubts is in mobile devices i want it to horizontal scroll yes like using gsap matchmedia and want to hide and show div only on horizontal scroll not on vertical scroll on mobile so i am not getting it how to do it

 

[Cassie]

Hi there - here's an example of your demo refactored to only work on desktop.

You can add the code for the horizontal scrolling in the other empty matchMedia function, make sure your CSS media queries at set up the same to add styles for each breakpoints.

 

 Hope this helps.

See the Pen pvzgrNp?editors=0010 by GreenSock (@GreenSock) on CodePen.

[Bhavin]

           Thanks a lot for help,  But l  can't understand horizontal scroll functionality (like i need to place overflow-x and it will start left left and end right right ) . 

         And now i am writing different functions for start and end to count viewport ( eg

end: () => `+=${(sections.length - 1) * vh(50)}`

 start: () => parentST.start + i * window.innerHeight * 0.4,

 end: () => `+=${window.innerHeight * 0.4}`,

) and call it so is there any other better way to do it (just like we do top top bottom bottom because maybe i am making start and end too complicated and using 2 different large codes for mobile and desktop)


   as well as Thanks @Cassie sometimes i watch GSAP official YouTube channel for updates and maybe its you on that channel (am not sure 😅)

[Cassie]

If you're stuck on horizontal scroll animation this video will help
 

 

I don't know if there's a better way to do this because I can't really see what you're doing from that little bit of code. That's why we ask for minimal demos.

My advice would be to get the horizontal scroll working in a demo, then get your timeline working - then combine them with matchMedia.

If you need help with the horizontal scrolling just pop together a demo for us and we'll take a look.

Demos that may help!
 

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

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

[Bhavin]

Thanks, @Cassie   This will help, and I will add it to my CodePen once it's done so that it will be easier for anyone who gets stuck there.

[Bhavin]

hey now i have a doubt regarding this when i click on some  section its happening correctly but my section value is not updating in scrolltrigger. like when i scroll again scrolltrigger will start from that point when i stop scroll. its happening because of section value but i am not getting any way to change that value because its working on loop and counting one by one.

See the Pen yyBJBgx by Bhavin-Raut (@Bhavin-Raut) on CodePen.

 

 

[Bhavin]

See the Pen MYgewKq by Bhavin-Raut (@Bhavin-Raut) on CodePen.

 and here also i am not getting it i want horizontal scroll to years only and add active class to that horizontal scroll you will understand it in this codepen by 

 mm.add("(max-width: 799px)"

please can anyone help me with this 

[Cassie]

Hi there. Well you have two different things happening here.

1) you are showing and hiding sections
2) You are scrolling down the page

In the case of scrolling, you are physically scrolling down and then triggering the showing and hiding at certain scroll points.
When you are clicking you are *just* showing and hiding sections without scrolling at all.

 

There's a bit of a logic mismatch here

I don't entirely understand your demo but something like this? 

See the Pen gbYMaEE?editors=0011 by GreenSock (@GreenSock) on CodePen.

FYI - The dates are links to a different section of your page, so they should really be anchor links in your HTML for accessibility reasons, those links should either jump to a certain point on your page, or scroll to a certain point in your timeline.

 

 

[Bhavin]

No that dates are just for yearly timeline like its showing and hiding div beside it.(That another div contains information about that years). but in your provided solution is not working properly sometimes it goes perfectly on click on dates but when we click on 2003 or 2008 or 1983 its activating 1 index lesser for that values (when we are on 1935 and click on 2003 its goes active to 2002)  "i just added +1  in srolltopvalue and its working now (but not working in IOS Mac now even working peerfect even math.round or math.ceil)"
 

 window.scrollTo({

              top: scrollTopValue+1,

              behavior: "smooth" // Adds a smooth scrolling effect

            });

 

  And thanks a lott....

    But can you see my second codepen also? I can't able to make it scroll horizontally and animate it. 

 

I mean in mobile i want horizontal scroll only for that dates. With horizontal true and left left or left center position. So when my year comes in left my another dov which contained that year information will be displayed. And then it will hide and next years info div will displayed just like sane functionality but i want horizontal scrolling.   maybe i need to use draggable also for horizontal scrolling

actually  i am looking for this type of animation https://www.kokuyocamlin.com/heritage

[Rodrigo]

11 hours ago, Bhavin said:

But can you see my second codepen also? I can't able to make it scroll horizontally and animate it. 

 

I mean in mobile i want horizontal scroll only for that dates. With horizontal true and left left or left center position. So when my year comes in left my another dov which contained that year information will be displayed. And then it will hide and next years info div will displayed just like sane functionality but i want horizontal scrolling.   maybe i need to use draggable also for horizontal scrolling

I would recommend the Container Animation feature and keep everything on vertical scrolling:

https://gsap.com/blog/3-8/#containeranimation

 

Also you might need to pin the section and the section after that one at the same time in order to avoid spaces between them (it'll depend on the CSS you have in place), so you could wrap those sections around a common parent and pin that parent as shown in these demos:

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

 

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

 

Hopefully this helps

Happy Tweening!

[Bhavin]

Thank you very Much @Rodrigo . I appreciate it but actually my requirement from ui is horizontal scroll only in mobile phones. Just like swiper we will scroll year one by one and the section will added active class and its nex section div will displayed.

   I am really sorry if it looks like demanding but i am really too stuck here. And i didn't get anything which is much convenient for horizontal scroll. Yes i tried many things also but sometimes my section goes outside of screen when its active and facing so much challenges. But i think there are many peoples in #community which are using gsap from many years so it can be easy task for them. I can understand there are resources issues also to debug and give time for problems from gsap members also and i am really sorry for it.

[Rodrigo]

Hi,

 

There must be something in your HTML/CSS setup that must be causing this. Here is a super simple demo using the native horizontal scrolling and seems to work as expected:

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

 

Finally @Cassie already provided a working responsive demo here:

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

 

I would use this if I was you, but that is just my humble suggestion on the subject

 

Hopefully this helps

Happy Tweening!

[Bhavin]

thank @Rodrigo it helps but i have little more issues see that codepen i only made codepen for mobile devices size (less than 799). 

See the Pen wBwzvwm by Bhavin-Raut (@Bhavin-Raut) on CodePen.

 
  it has little issues in start and end points when i add active class onenter and removing it onleave there is something happening in middle between my next section start point is before section end point, but i dont understand still why its happening in middle of them. (maybe my active section is taking more height and due to it my scroll little shifts). can you please help me to solve this issue?  . i can directly set it by gsap to also but i want different purpose for adding class so i can only do it by adding class

yes and i want first section will be active onstart and i am using 2 css property which is needed because i dont want fast horizontal scroll .

 

scroll-snap-type: x mandatory;

scroll-snap-align: start;

 

 

 

now i increased end + 3 so its working finely but is there any other best solution? (its done after adding post ) now just click functionality remaining foe horizontal scroll

 end: `${width+3} right`,

 

thanks @Rodrigo and @Cassie  i got so much help from you regarding that section.

 

Edited December 11, 2024 by Bhavin
changing little code

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Is mostly about the calculations in the start and end points. Is better to simplify that and be sure that every single year element has the same width (ideally) in order to add the extra space at the end of the years container, although in this demo that depends only on the final year's width.

 

Hopefully this helps

Happy Tweening!

[Bhavin]

Thanks its best approach for me @Rodrigo but still my click is not working properly in that demo 😐

[Rodrigo]

I updated the demo to use a better approach for the click event, using the start point of each ScrollTrigger instance:

 

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

 

Hopefully this helps

Happy Tweening!

[Bhavin]

Thank you So much @Rodrigo.  it will help me a lott