Jump to content
Search Community

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

Tony Song test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

@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

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

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