Jump to content
Search Community

Horizontal scroll 4 boxs by bootstrap

Isla test
Moderator Tag

Recommended Posts

I have 4  boxs  created by boostrap

I want to make horizontal scroll when i scroll down but i can't i tried everything with no results

<div class="edition">

 <div class ="container" >

 <div class ="row" >

 <div class ="col-3" >

 <div class =edition-box"" >....</div>

</div>

<div class ="col-3" >

 <div class =edition-box"" >....</div>

</div>

<div class ="col-3" >

 <div class =edition-box"" >....</div>

</div>

 

 

 

 

 

</div>

><¬>

</div>

</div>

Link to comment
Share on other sites

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 allthe 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/Nuxt/Gatsbyor some other framework, you may find CodeSandbox easier to use. 

 

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

Link to comment
Share on other sites

Hi @Isla welcome to the forum! I would love to see what you've already tried!  Codepen is an amazing tool for that, not only to share your code with others, but also for you to test out weird ideas. 

 

Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

Please share a minimal demo and someone will be sure to help you out here!

  • Like 1
Link to comment
Share on other sites

First guess your using the bootstrap container element which like the Zurb Foundation one restricts the width of the content within it so if your trying to scroll the "col-3" boxes its unlikely that will just hit the width of the container and therefore not work.

 

Lo0king at the bootstrap documentation https://getbootstrap.com/docs/5.0/layout/containers/ you may have a problem. I do not use bootstrap but certainly in foundation you can just remove the .container element although bootstrap seems to require it.

  • Like 1
Link to comment
Share on other sites

@Isla as I said I would just focus on the animation at fist, have the boxes move from left to right the way you want. 

 

See the Pen XWYJQjV?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

And after that when you are happy with the animation, add ScrollTrigger and tweak it from there

 

See the Pen gOKbyLY?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

@Isla that is correct, bootstrap will apply a lot of CSS to your layout. You either have to overwrite that or write your own logic for this particular block of content.

 

It's really important how you build your layout if you want to animate it and with bootstrap this is not something you get great control over, because it will imply that you want everything underneath each other on mobile.

Link to comment
Share on other sites

Here's the docs, https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

It's pretty easy (it must be if I can use it) just wrap the sideways scroll within the function so it only fires if the screen is over a certain size..

 

Taken for the docs..

let mm = gsap.matchMedia();

mm.add("(min-width: 800px)", () => {
  // desktop setup code here...
});

mm.add("(max-width: 799px)", () => {
  // mobile setup code here...
});
Link to comment
Share on other sites

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid 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 on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

  • Thanks 1
Link to comment
Share on other sites

OK you need to do a lot of changes, this is not basically a Greenock issue but a combination of HTML, CSS and JS "issues"

 

Firstly the HTML 
you should use   <div class=" col-sm"> not   <div class=" col"> as per the docs https://getbootstrap.com/docs/4.0/layout/grid/ to get a flexible grid that stacks.

 

Next CSS 

.my-boxes should only have the display:flex class applied on sizes above phone ie 800px only, otherwise leave it as Bootstrap sets it.

 

Lastly the JS needs a rewrite.

 

console.clear(); // Start with a clean console on refesh 
gsap.registerPlugin(ScrollTrigger);
let mm = gsap.matchMedia();

const imageSection = document.querySelector(".main-editions");
const container = document.querySelector(".container-main");


mm.add("(min-width: 800px)", () => {
  const timeline = gsap.timeline({
    scrollTrigger: {
    trigger: '.container',
    pin: true,
    scrub: true,
      markers:true,
  //   end: () => "+=" + (imageSection.scrollWidth - document.documentElement.clientWidth),
  //   invalidateOnRefresh: true
  }
})
timeline.from('.my-boxes', {
  xPercent: 100, 
  ease: "none",

});
});

I tested this quickly by playing around with your codepen and it seemed to work, if nothing else it will give you something to move forward from.

Disclaimer I don't use Bootstrap, and the JS change was a quick and dirty copy and paste, likely a lot could be improved.

 

  • Like 2
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.
×
×
  • Create New...