Thank you for sharing! Second method works perfectly after a few adjustments. Ive tested with multiple section additions and made a few changes that should help with some of the issues people are experiencing with scrolling. EDITS: made the #sectionBackground objects: 1px wide x 99% height (of section) (max/min H&W set to None) and docked them centered -> left. Also set opacity of each to 0%. This change proved more responsive to changes in the viewport height and kept the page from 'auto scrolling' through the sections by preventing the target object from entering the viewport 'with a few extra pixels to spare'. Also gets the object to be out of the way of the page layout. Again - awesome tutorial!!
Thank you it was I was looking for this long time. thank you. I just have one problem maybe you know the solution? when you scroll with the mouse if you turn the wheel a little to fast it starts automatically scrolling or if in the middle of scroll, you scroll up it stops again. and also i don't know why but it does not work on laptops touchpad
Is there any way to get scroll snap to work in the classic editor? I used the code in Velo and scrolling down works fine. But scrolling up is wonky. I need to scroll up about 3 times before it snaps up, and even then, it snaps all the way up to the first section. In classic editor I can't seem to set the object to dock, can't set section height to 100vh and can't set 1% margins. Are these dealbreakers for this code to work properly? Any advice would be appreciated.
Hey! Great video, as always! 🙂🙂🙂 See, I´ve trying to use this on my new project (by the second method), but, for some reason, that´s what happens: The effect works perfectly on the first three sections, but won´t work on the fourth one (no matter how many times I rebuild the section and the shape)... I´m sure the code is exactly like yours and the background shape ID is correct. Do you have any guess what might be causing this issue? Anyway, thank you for this useful content! 👏
** Updating** : All of the sudden, without any action, the problem is gone 🙌 I'm not deleting the comment above in case anyone faces the same issue: don't panic folks, It´s temporary 🤣🤣
Maybe it's relater to the DOM order. The sections need to be arranged in the correct order of the page flow. I made a video about it: ruclips.net/video/nIj1_a_SEnc/видео.html
Bro, I love your tuts. I know nothing about JavaScript, so this is the perfect "classroom" for me. Thanks so much!! I copied the code and updated the IDs, then had to add this line at the top (import wixWindow from 'wix-window';), as the 'wixWindow" was showing an error. The issue I'm having is when scrolling up. I have 5 sections. It doesn't snap at first, but then it kicks in and scrolls all the way to the top. The site is not published, though, if that matters. What could be wrong? This is what I have: const pageSections = []; let onProgress = false; import wixWindow from 'wix-window'; $w.onReady(function () { if (wixWindow.formFactor === "Desktop") { getPageSections(); initSectionScrollSnap(); } }); function getPageSections() { $w('Page').children.forEach(section => { section.type === '$w.Section' && pageSections.push(section); }); } function initSectionScrollSnap() { const bgShapes = [ // This is what you need to replace. this is all the sections background shapes. 'svg01', 'svg02', 'svg03', 'svg04', 'svg05' ]; bgShapes.forEach((shape, index) => { const bgShape = $w(`#${bgShapes[index]}`);
Hey, thank you for your kind words! Sorry my mistake.. I forgot to add the import wixAnimation line. Use this code: import wixWindow from 'wix-window'; const pageSections = []; $w.onReady(function () { if (wixWindow.formFactor === "Desktop") { getPageSections(); initSectionScrollSnap(); } }); function getPageSections() { $w('Page').children.forEach(section => { section.type === '$w.Section' && pageSections.push(section); }); } function initSectionScrollSnap() { const bgShapes = [ // This is what you need to replace. this is all the sections background shapes. 'svg01', 'svg02', 'svg03', 'svg04' ]; bgShapes.forEach((shape, index) => { const bgShape = $w(`#${bgShapes[index]}`); bgShape.onViewportEnter(async () => { await pageSections[index].scrollTo(); }); }) }
Bro, I'm having an issue, and the issue is that It's doesn't work correctly, it's automatically scrolling out when the site is published along with not proper snapping! I have a footer on the top is that issue? Can you fix this? btw nice tut
@@carolgraphicide4741 i did figure out a way to achieve this but the lack of responsiveness in classic wix is an issue as the same won't work for other screen resolutions and aspect ratios
i have tried a lot to do such a scroll snap but it didn't worked :(, can you please make a updated version video with the process because the wix studio is changed now, it has been 2 years. please brother, i'll be so thankful to you.
Heyyy loved your video! I'm having a problem though. I've copied and pasted the code from the second method, and as I go down, it works just fine. However when I try to go back up, it doesn't work unless I'm on the last section. But then, the scrolling goes up to the first section on its own. I've tried rebuilding and resizing sections, but still the same. Please helppppp 😭🙏
@@Studio-Il yes they use gasp scroll trigger, but I didn’t quite understand if it works with velo … I’ve asked around and received so many answers… the editor x community says that probably not but the guys from Gasp say yes :) … as they said the gasp scroll trigger is based only on JavaScript … so I am very confused. I’ve tried to use it in velo but I didn’t work … but I am also not good with coding… so … I would really appreciate it if you maybe have a look … at least to understand if it’s working or not. Thank you so much
Thank you for sharing! Second method works perfectly after a few adjustments. Ive tested with multiple section additions and made a few changes that should help with some of the issues people are experiencing with scrolling.
EDITS: made the #sectionBackground objects: 1px wide x 99% height (of section) (max/min H&W set to None) and docked them centered -> left. Also set opacity of each to 0%. This change proved more responsive to changes in the viewport height and kept the page from 'auto scrolling' through the sections by preventing the target object from entering the viewport 'with a few extra pixels to spare'. Also gets the object to be out of the way of the page layout. Again - awesome tutorial!!
Hey, I have missed your great comments.
Thank you, it's awesome!
And thank you for sharing and helping everyone ❤️
Thank you it was I was looking for this long time. thank you. I just have one problem maybe you know the solution? when you scroll with the mouse if you turn the wheel a little to fast it starts automatically scrolling or if in the middle of scroll, you scroll up it stops again. and also i don't know why but it does not work on laptops touchpad
Is there any way to get scroll snap to work in the classic editor? I used the code in Velo and scrolling down works fine. But scrolling up is wonky. I need to scroll up about 3 times before it snaps up, and even then, it snaps all the way up to the first section. In classic editor I can't seem to set the object to dock, can't set section height to 100vh and can't set 1% margins. Are these dealbreakers for this code to work properly? Any advice would be appreciated.
I added code to my client's website, but is stopped working around 2-3 months ago, what can be an issue? It stopped working on all browsers
Hey! Great video, as always! 🙂🙂🙂
See, I´ve trying to use this on my new project (by the second method), but, for some reason, that´s what happens:
The effect works perfectly on the first three sections, but won´t work on the fourth one (no matter how many times I rebuild the section and the shape)...
I´m sure the code is exactly like yours and the background shape ID is correct.
Do you have any guess what might be causing this issue?
Anyway, thank you for this useful content! 👏
** Updating** :
All of the sudden, without any action, the problem is gone 🙌
I'm not deleting the comment above in case anyone faces the same issue: don't panic folks, It´s temporary 🤣🤣
Glad to hear!
Maybe it's relater to the DOM order.
The sections need to be arranged in the correct order of the page flow.
I made a video about it:
ruclips.net/video/nIj1_a_SEnc/видео.html
Good job! I see about the mobile version, I take it there’s no issues with tablet version?
Also, can this still work if you use a vertical strip as a left side navigation menu?
Right, same issue in tablet.
In code I'm checking the device type and run it only if it's desktop.
I didn't find a way to make It scroll horizontally
Awesome video, thank you.
Bro, I love your tuts. I know nothing about JavaScript, so this is the perfect "classroom" for me. Thanks so much!!
I copied the code and updated the IDs, then had to add this line at the top (import wixWindow from 'wix-window';), as the 'wixWindow" was showing an error.
The issue I'm having is when scrolling up. I have 5 sections. It doesn't snap at first, but then it kicks in and scrolls all the way to the top. The site is not published, though, if that matters. What could be wrong? This is what I have:
const pageSections = [];
let onProgress = false;
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.formFactor === "Desktop") {
getPageSections();
initSectionScrollSnap();
}
});
function getPageSections() {
$w('Page').children.forEach(section => {
section.type === '$w.Section' && pageSections.push(section);
});
}
function initSectionScrollSnap() {
const bgShapes = [
// This is what you need to replace. this is all the sections background shapes.
'svg01',
'svg02',
'svg03',
'svg04',
'svg05'
];
bgShapes.forEach((shape, index) => {
const bgShape = $w(`#${bgShapes[index]}`);
bgShape.onViewportEnter(async () => {
await pageSections[index].scrollTo();
});
})
}
Hey, thank you for your kind words!
Sorry my mistake.. I forgot to add the import wixAnimation line.
Use this code:
import wixWindow from 'wix-window';
const pageSections = [];
$w.onReady(function () {
if (wixWindow.formFactor === "Desktop") {
getPageSections();
initSectionScrollSnap();
}
});
function getPageSections() {
$w('Page').children.forEach(section => {
section.type === '$w.Section' && pageSections.push(section);
});
}
function initSectionScrollSnap() {
const bgShapes = [
// This is what you need to replace. this is all the sections background shapes.
'svg01',
'svg02',
'svg03',
'svg04'
];
bgShapes.forEach((shape, index) => {
const bgShape = $w(`#${bgShapes[index]}`);
bgShape.onViewportEnter(async () => {
await pageSections[index].scrollTo();
});
})
}
@@Studio-Il thanks so much! I'll give it a try :)
Thanks! Works like a charm :)
Bro, I'm having an issue, and the issue is that It's doesn't work correctly, it's automatically scrolling out when the site is published along with not proper snapping!
I have a footer on the top is that issue? Can you fix this? btw nice tut
Hey, is there anyway to replicate this on classic Wix editor? esp the viewport height percentage part with a code or something?
Same trouble. Were you able to achieve this on wix?
@@carolgraphicide4741 i did figure out a way to achieve this but the lack of responsiveness in classic wix is an issue as the same won't work for other screen resolutions and aspect ratios
i have tried a lot to do such a scroll snap but it didn't worked :(, can you please make a updated version video with the process because the wix studio is changed now, it has been 2 years. please brother, i'll be so thankful to you.
Thank you for your feedback!
I'll really considering to create a new tutorial on Studio
@@Studio-Il Thanks a lot brother, i'm waiting really i needed this a lot.
@@Studio-Il brother please do it fast please.
@@StoryJokes. There you go:
ruclips.net/video/vrDCQu__8BE/видео.html
14:56 remember to change the bg color svg name
Thanks bro
Great stuff thank you! Unfortunately it doesn't work on mobile and in Chrome Browser on Mac, PC and iPad. Cheers, Ian
whats the point of doing this if it doesnt work for mobile.
Heyyy loved your video!
I'm having a problem though.
I've copied and pasted the code from the second method, and as I go down, it works just fine. However when I try to go back up, it doesn't work unless I'm on the last section. But then, the scrolling goes up to the first section on its own.
I've tried rebuilding and resizing sections, but still the same.
Please helppppp 😭🙏
It's hard to understand the issue... anyway, try to fix the sections order ruclips.net/video/nIj1_a_SEnc/видео.html
@@Studio-Il The order appears to be fine. It's just that when I scroll back up, it goes to the section 1 by itself ):
Too bad its not works for mobile …
Hi , is there any wy to create this effect in editor x ?
ruclips.net/video/x-BVEhyYW50/видео.html
thank you
Hey,
I this that is is possible with custom element code. I've never done it...
@@Studio-Il yes they use gasp scroll trigger, but I didn’t quite understand if it works with velo … I’ve asked around and received so many answers… the editor x community says that probably not but the guys from Gasp say yes :) … as they said the gasp scroll trigger is based only on JavaScript … so I am very confused. I’ve tried to use it in velo but I didn’t work … but I am also not good with coding… so … I would really appreciate it if you maybe have a look … at least to understand if it’s working or not. Thank you so much
mis dieses