Jump to content
Search Community

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

Jefe_Zebos test
Moderator Tag

Recommended Posts

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...