Jump to content
GreenSock

Tony Song

Add new sections dynamically on Horizontal Scroll (Scroll Trigger Plugin)

Go to solution Solved by GreenSock,

Recommended Posts

Dear GSAP devs,

I want to add a new section on horizontal scroll, is it possible?

The main goal is to allow the user to scroll to next section after clicking a button.

 

Regards,

 

Tony

See the Pen QWQxWNz by tonywei (@tonywei) on CodePen

Link to comment
Share on other sites

Welcome to the forums. Yep! Sure is possible.

 

Right now you're just adding a section but you're not updating the width of the container, the distance of the scrollTriggered tween or the scrollTrigger trigger positions.

 

The key will be to use functional values and call ScrollTrigger.refresh() when you've updated everything.

 

Pseudo code below. I tried to update your pen but you're using tailwind and I'm not familiar enough.

 

Why don't you give it a shot!

const tween = gsap.to(".section", {
  xPercent: () => {
    let sections = gsap.utils.toArray(".section");
    return -100 * (sections.length - 1)
  },
  scrollTrigger: {
    trigger: ".content",
    scrub: true,
    pin: true,
    invalidateOnRefresh
  }
});


const addSection = () => {
  const sectionEl = document.createElement("section");
  sectionEl.classList.add('section');
  sectionEl.textContent = "New section";
  
  UPDATE WIDTH OF CONTAINER HERE
  
  contentEl.append(sectionEl);
  
  // update scrolltrigger
  ScrollTrigger.refresh()
}

addSectionButtonEl.addEventListener('click', addSection);


 

Link to comment
Share on other sites

hi @Cassie

Thanks, seems like ScrollTrigger.refresh does something, but it's also adding empty space after the sections.

I also tried to update the width of the container, but I think it's overridden every time I did scrolling, could you please help?

I updated the code as well.

 

Regards,

 

Tony

Link to comment
Share on other sites

Sorry - I don't understand what the tailwind classes are doing.

Can you possibly try with this demo so it's a little clearer?

Edit - this is working now!

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

Link to comment
Share on other sites

@Cassie

No worries!

just tried your demo, after I clicked on "add", the scroll not working anymore and there was an empty space on the right side, I'm not sure what is that. I also tried it on the incognito mode just in case, does it also happen to you?

Link to comment
Share on other sites

Ah sorry about that I started working on a solution and didn't fork it! My bad.
 

Should be working now! Hopefully that gives you enough to work with and get it working in your demo. 

Link to comment
Share on other sites

  • Solution

Here's a fork that tweaks some things: 

  1. It adjusts the scroll position to make it look seamless even though you're changing the ratios by adding a new section. This also involves eliminating the scrub animation just for that part.
  2. Uses a CSS variable for width (explanation is in the comments)
  3. The add button is fixed on the right side of the viewport to make it easier to interact with.
  4. Randomly selects a color for the new section and numbers it (for fun)

I put some notes in the comments to make it easier to follow. 

 

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

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

@Cassie@GreenSock

Sorry for the delayed reply.

Thanks for all your help, the code you provided really a great help!!

  • Like 1
Link to comment
Share on other sites

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