Horizontal scroll 4 boxs by bootstrap

[Isla 0 Likes (Newbie)]

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>

[GSAP Helper 97 Likes (Contributor)]

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. 

[mvaneijgen 1,729 Likes (Superhero)]

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!

[Isla 0 Likes (Newbie)]

See the Pen LYrEqxV by Islamsaeed (@Islamsaeed) on CodePen

 

 

 

this is my code 

really thanks so much for the support 

[The Old Designer 26 Likes (Newbie)]

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.

[mvaneijgen 1,729 Likes (Superhero)]

@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

[Isla 0 Likes (Newbie)]

thanks so much for the great support , in mobile it doesn't work as in other screens , is that because  col-12

[mvaneijgen 1,729 Likes (Superhero)]

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

[The Old Designer 26 Likes (Newbie)]

One option is to use the GSAP matchMedia() function and turn off horizontal scrolling on mobile (which may be best anyway)

[Isla 0 Likes (Newbie)]

See the Pen gOKpZeY by Islamsaeed (@Islamsaeed) on CodePen

 

i did that but still in mobile can't all of them ,the last one  not  shown completely,

don't  know how to use matchMedia()

[The Old Designer 26 Likes (Newbie)]

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...
});

[Isla 0 Likes (Newbie)]

See the Pen gOKpZeY by Islamsaeed (@Islamsaeed) on CodePen

 

i tried but can't  , still the  same problem of  the last  box 

[GSAP Helper 97 Likes (Contributor)]

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.

 

[The Old Designer 26 Likes (Newbie)]

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.