Not able to create a horizontal scrolling cards using scroll Trigger

[Mohit Pain]

Hello everyone,

I'm new to GSAP, and I'm trying to learn more every day. I want to create a horizontal scroll that is full of cards. What I want is when my black  main container gets pinned at the top, and then as I start scrolling, my cards should start coming from the right side of the viewport and later it should get stopped after there is no cards left as shown in the video.

I have tried many times, but I'm not able to do it using GSAP ScrollTrigger. I have no idea how to position my cards at the end of the viewport and let them pass through the screen.

You can see this video as a reference. I have uploaded this video. Please look at it and help me; I'm stuck.

 

youtube link : 

 

See the Pen YzbvKBJ by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[Carl]

Hi

 

Glad to hear you are interested in learning more about GSAP and you're trying things like this.

 

Here is a basic demo from my course ScrollTrigger Express that perhaps may help.

 

See the Pen PoxojaO?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Open it in a new window and resize to see that it is fully responsive and that the pinning stops whenever "japan" is visible in the viewport.

 

Also notice that each country name (card) is a different width and it adjusts flawlessly to resize.

 

The course contains loads of videos to help you through these types of common scrolltrigger tasks and many more advanced setups.

 

Hopefully this demo will give you some ideas how to incorporate the code into your project.

 

Carl

 

[Mohit Pain]

But sir, my animation is different. My cards start from the right side of the viewport as shown in the video. However, in your solution, your cards are already at the start position. I want my cards to come from outside the viewport from the right side. Also, . I want my cards to start coming from outside the viewport from the right side. How can I place my cards outside the viewport?

 

please watch my reference video once again

[Carl]

Hi,

 

Perhaps you can just add a blank card that is same width as the viewport.

 

 

[Carl]

like this

 

See the Pen xxNzwKY?editors=0010 by snorkltv (@snorkltv) on CodePen

[Mohit Pain]

1 hour ago, Carl said:

like this

 

 

 

Sir, I tried to add the empty div at the front as you said, but I'm not able to implement your ScrollTrigger.create code inside my timeline, and I'm not able to add the correct calculation for the horizontal cards inside my timeline code. Sir, please look at my JS code and make some corrections. I'm not able to add the "end" value inside my timeline so that the horizontal scroll works fine. my code looks very complicated that's why it is hard to to add your codes inside my code, so please sir help me in this. i have put x:"-100%" which is wrong thats why i want to use your solution.

 

See the Pen YzbvKBJ?editors=0110 by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[Carl]

1 hour ago, Mohit Pain said:

my code looks very complicated that's why it is hard to to add your codes inside my code

Yes, unfortunately I don't understand your code very well either and the best I can do is provide you an example of how I think it is best to set it up.

 

My demo provides the bare-minimum of code for this type of effect and it's also fully responsive.

 

I think it would be best for you to fork my demo and add your cards in place of my <h2> tags. 

 

I apologize, but I just don't have the time at the moment to try to re-work your project for you.

 

 

 

[Cassie]

Hi there Mohit, Is this what you're trying to do?

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

 

This video explains how to set up horizontal scrolling in great detail, including triggering animations inside the scrolled container.

I suggest taking at look at the lessons in Carl's ScrollTrigger course if you're still stuck.

Also my advice would be to just try things, break stuff, plug in values and tweak things until it does what you want! That's the best way to learn. We're here for guidance and to nudge you in the right direction, but the best way to learn is to read the advice, take other people's code and try to implement it yourself, even if it means everything breaks at first!

[Mohit Pain]

14 hours ago, Cassie said:

Hi there Mohit, Is this what you're trying to do?
 

 

 

This video explains how to set up horizontal scrolling in great detail, including triggering animations inside the scrolled container.

I suggest taking at look at the lessons in Carl's ScrollTrigger course if you're still stuck.

Also my advice would be to just try things, break stuff, plug in values and tweak things until it does what you want! That's the best way to learn. We're here for guidance and to nudge you in the right direction, but the best way to learn is to read the advice, take other people's code and try to implement it yourself, even if it means everything breaks at first!

Ma'am, your solution is working fine for me, but why are my page animations lagging? These animations are fast and sometimes too laggy. However, when I open my project in the Brave browser, it works smoothly but not in Chrome.

[GSAP Helper]

Hi there! Sorry to hear you've run into some performance issues.

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

I hope this helps!

[Mohit Pain]

4 hours ago, Mohit Pain said:

Ma'am, your solution is working fine for me, but when i try to move the horizonal boxes while scrolling it moves too mast, even i tried to set the duration value but still it is too fast.. i even tried to set "duration:50" which is too larger number, but i tried then also it is moving fast in my project. any solution?

 

[GSAP Helper]

The "speed" of a scrubbed animation is controlled by the distance between the start and end of the ScrollTrigger, so all you need to do is increase the "end" value to push that further down the page. 

 

If you still need help, please make sure you include a minimal demo that clearly illustrates the issue and your attempt to resolve it.