Jump to content
GreenSock

Andrew M

Horizontal Scroll Snapping only to the beginning or end of container, not each section.

By Andrew M, in GSAP. Views: 163

Moderator Tag
Go to solution Solved by mvaneijgen,

Recommended Posts

Posted

Hi guys,

 

I'm using GSAP for the first time in combination with Divi.

I've managed to get my page scrolling horizontally, and it's snapping to a degree but instead of snapping to each .horizontal-section it seems to only snap either to the beginning or end of the wrapper (.horizontal-container) depending which direction of the mouse wheel.

At one point it was snapping to the second/middle .horizontal-section, but only for a brief second. I've since lost/overwritten those changes trying to get it working properly.

Page link:
https://etlmarketing.uk/index.php/new-mgr-homepage-testing/

Code:
  

<head>
<!-- Include GSAP and ScrollTrigger scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<style>
.horizontal-container {
width: 100%;
height: 100vh; /* Set the height of the container to the full viewport height */
display: flex;
flex-wrap: nowrap;
max-width: none;
flex-direction: row;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
flex-shrink: 0;
width: 100%;
will-change: transform;
}
</style>

<script>
jQuery(document).ready(function ($) {
gsap.registerPlugin(ScrollTrigger);

// var pinTrigger = $('<div class="horizontal-container"/>');
// pinTrigger.wrapAll('<div class="pin-trigger"/>');

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');
	
gsap.to(allSections, {
xPercent: -100 * (allSections.length - 1),
ease: 'none',
scrollTrigger: {
trigger: '.horizontal-container',
pin: true,
start: 'top top',
scrub: 1,
snap: true, // Enable snapping behavior
end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,
},
});
});
</script>
</head>


It's proving to be a frustrating blocker with a work project. Any help is appreciated.

Link to comment
Share on other sites
  • Solution
  • Solution
Posted

Hi @Andrew M welcome to the forum!

 

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

 

Also check the docs, snapping can have a lot more settings then just true https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

 

Side note: Also make sure you're on the latest version we're currently at version 3.12.2

  • Like 1
Link to comment
Share on other sites
Posted

Hi,

 

You have an error in your code. The value of snap can't be a bolean. These are the proper values for snap:

  • Number
  • Array
  • Function
  • Object
  • String ("labels" or "labelsDirectional")

This is a simple example of horizontal  snapping:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites
  • Author
Posted
23 hours ago, mvaneijgen said:

Hi @Andrew M welcome to the forum!

 

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

 

Also check the docs, snapping can have a lot more settings then just true https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

 

Side note: Also make sure you're on the latest version we're currently at version 3.12.2

 

20 hours ago, Rodrigo said:

Hi,

 

You have an error in your code. The value of snap can't be a bolean. These are the proper values for snap:

...

Happy Tweening!


Firstly thank you for the welcome. I'm amazed how quickly I received a helpful response.

It was indeed the snap value. After changing it from true to .5 the snapping worked correctly. I've also updated my tags to the most up-to date version, thanks.

Working with gsap makes me want to move away from wordpress/learn more native coding because your tools are so awesome but kind of tricky to emulate due to the differences in structure and limited customisation.

This is part of a much larger project for which I have a number of hurdles I hope to overcome using GSAP. I'll probably make another thread soon to make sure I'm approaching things correctly.

 

Thanks again!

Link to comment
Share on other sites
Posted

Thanks for the kind words! Glad it helped!

 

37 minutes ago, Andrew M said:

Working with gsap makes me want to move away from wordpress/learn more native coding because your tools are so awesome but kind of tricky to emulate due to the differences in structure and limited customisation.

 

 

All the frameworks and platforms out there are just tool boxes you've to learn before you can become proficient with them. And indeed if you're using some of the shelf theme in Wordpress it will be hard to insert GSAP animations in them if you're not in full control of the underlaying structure, but that isn't Wordpress at fault.

 

Most of my projects I build with Wordpress and GSAP and because I build everything from scratch, I'm in full control of everything and the combination with Wordpress and GSAP is great! It is just how proficient you're at them to get the most out of it. 

 

Good luck and happy tweening!

  • Like 3
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account