Hello, im trying to make this type of effect, is that possible ? Carina Frey & Stefanie Barth (frey-barth.com)
I tried with a
export function imageX2_viewportEnter(event) {
setTimeout(() => {
$w("#imageX2").scrollTo()
}, 5000)
}
But it doesn’t really work
Thanks for your answer ! Oh that’s heavy … will it make it scrolling when on mid air ? i didn’t see that on the preview example !
The objective is really to understand that if a user is stopped on his scrolling between two strips, he goes to one or another
Oh and i’m working in editor X, don’t know if we can have free anchors !
And actually, having full screen moving quickly to the other strip is easier with “onviewportenter” and scrollto
@edouard
You perhaps should/could tag Ahmad. He will be the person, who can help you better in this case. It’s his example.
@russian-dima @ahmadnasriya what you think ?
The idea is : if the image (can i retrieve image viewport current height ?) is >50 % of the viewport height, scroll to image after 5000 ms, else do nothing
wixWindow.getBoundingRect("#imageX1")
.then((windowSizeInfo) => {
const y = windowSizeInfo.scroll.y
const image1 = windowSizeInfo.document.height
Is their a way i can get the image height in viewport height ?
@edouard
Not sure if this is possible.
These are your opertunities…
import wixWindow from 'wix-window';
wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
let windowHeight = windowSizeInfo.window.height; // 565
let windowWidth = windowSizeInfo.window.width; // 1269
let documentHeight = windowSizeInfo.document.height; // 780
let documentWidth = windowSizeInfo.document.width; // 1269
let scrollX = windowSizeInfo.scroll.x; // 0
let scrollY = windowSizeInfo.scroll.y; // 120
} );
So what do you need to get the size of your image?
And which command you could use to achieve your aim?
This looks good… (i think). This should give you back the current “scrol-position”.
let scrollX = windowSizeInfo.scroll.x; // 0
let scrollY = windowSizeInfo.scroll.y; // 120
That means!
If you do a SCROLL and you would be able to make an EVENT, caused by an element ----> for example —> onViewPortEnter??? and onViewPortOut???
What do you think, could this work for you ?
Pseudo-Code: (while you are scrolling your page in which you have some PICs)
import wixWindow from'wix-window';
$w.onReady(()=>{
$w('#myPic').onViewportEnter(()=>{
wixWindow.getBoundingRect().then( (windowSizeInfo) => {
let scrollX = windowSizeInfo.scroll.x; // 0
let scrollY = windowSizeInfo.scroll.y; // 120
console.log("Start-Position: ", scrollX) //---> starting x-position ! ! ! !
console.log("Start-Position: ", scrollY) //---> starting y-position ! ! ! !
})
})
$w('#myPic').onViewportLeave(()=>{
wixWindow.getBoundingRect().then( (windowSizeInfo) => {
let scrollX = windowSizeInfo.scroll.x; // 0
let scrollY = windowSizeInfo.scroll.y; // 120
console.log("End-Position: ", scrollX) //---> ending x-position ! ! ! !
console.log("End-Position: ", scrollY) //---> ending y-position ! ! ! !
})
})
})
I do not know if this can or will work → just some theoretical thoughts. 
@russian-dima Hello ! Yeah i know what you mean there ! You pointed that well, i have 2 problems :
Viewportenter ? How about the user continue scolling ? even not on the viewport anymore, he will be brought back, and it will make a loop of scrolling (made that mistake already)
Is visible ? well, it’s always visible, even not on the viewport
SetTimeout ? Yes, but if i want to cancel the action because the user left the image, it will send him back anyway
@edouard
Play around with this informations, perhaps you will be able to calculate it somehow.
You have 3-possibilities:
DesktopSize —> for example 1440x900
Document-Size
Y-Scroll-Position onViewPortEnter or Leave…
@russian-dima Hello Russia, i know what i need : the scroll event, because i can retrieve the Document height and the window height. So to scroll to one or another, it can’t be on viewport, but only on scroll stop (then set a timer that handle an event doing “if the client stop for 3 sec, scroll to …”), i’ll try to build a (hazardous) method with the scroll X,Y , will keep you updated
@edouard
Check this POST here…
https://www.wix.com/velo/forum/community-discussion/scrollto
Perhaps it also can be usefull for you.
@russian-dima ok i’ve integrated this code of yours :
$w.onReady(() => { setInterval(() => show_scrollPosition(), scrollInterval); })
function show_scrollPosition() {
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let scrollX = windowSizeInfo.scroll.x;
let scrollY = windowSizeInfo.scroll.y;
console.log(scrollX, scrollY)
if (scrollPosition !== windowSizeInfo.scroll.y) {
if (scrollPosition < windowSizeInfo.scroll.y) {
scrollDirection = “DOWN” , console.log(scrollDirection)
} else if (scrollPosition > windowSizeInfo.scroll.y) {
scrollDirection = “UP” , console.log(scrollDirection)
}
scrollPosition = windowSizeInfo.scroll.y;
}
});
}
Because it’s pretty interessant, i’ll try to put a setTimeout event !
However, am i able to clear the setTimeout event if people keep scrolling ? (that was an issue for me !)
@edouard
Perhaps you will find your answer how to stop the interval here…
https://russian-dima.wixsite.com/meinewebsite/test-1
@russian-dima hmm… it works with arrays right ? And when cleared, it remains with nothing so it stops ?
Maybe if i put an array with an anchor, and then clear it out it will do the trick !
@edouard
At moment i do not have the time to support you more (working on own projects), just can show you some existing examples. You will have to do the rest on your own, sorry.
Let us know, when you have found your solution.
Good luck
@russian-dima Well, that was already awesome from you, you did help me out a lot here, and in other posts ! When i first saw your message, i was hyped af ^^
Thanks for your time, i’ll post a updated code snippet if i figure it out and help the community with it ! 
@russian-dima , @yisrael does the clearTimeout function work on wix ? it will solve my problem !
Since it is a part of JS it should normaly work.
https://www.w3schools.com/jsref/met_win_cleartimeout.asp
ok here i my code, it’s based on viewport, it almost work but there is like an up and down movement when your between 2 viewport ! Maybe i should use clearTimeout with another viewportleave…
var myvar
//scrolls to features
export function toPur_viewportEnter() {
$w("#imageX1").scrollTo()
clearTimeout(myvar)
}
export function toPur_viewportLeave(event) {
myvar = setTimeout(() => { $w("#imageX1").scrollTo()}, 3000 )
}
export function toHarmonie_viewportEnter() {
$w("#Harmonie").scrollTo();
clearTimeout(myvar)
}
export function toHarmonie_viewportLeave(event) {
myvar = setTimeout(() => { $w("#Harmonie").scrollTo()}, 3000 )
}
export function toElegance_viewportEnter() {
$w("#Elegance").scrollTo();
clearTimeout(myvar)
}
export function toElegance_viewportLeave(event) {
myvar = setTimeout(() => { $w("#Elegance").scrollTo()}, 3000 )
}
export function toLoft_viewportEnter() {
$w("#imageX3").scrollTo();
clearTimeout(myvar)
}
export function toLoft_viewportLeave(event) {
myvar = setTimeout(() => { $w("#imageX3").scrollTo()}, 3000 )
}
export function toScience_viewportEnter() {
$w("#imageX4").scrollTo();
clearTimeout(myvar)
}
export function toScience_viewportLeave(event) {
myvar = setTimeout(() => { $w("#imageX4").scrollTo()}, 3000 )
}
export function toBetonne_viewportEnter() {
$w("#Betonne").scrollTo();
clearTimeout(myvar)
}
export function toBetonne_viewportLeave(event) {
myvar = setTimeout(() => { $w("#Betonne").scrollTo()}, 3000 )
}
export function toWork_viewportEnter() {
$w("#imageX5").scrollTo();
clearTimeout(myvar)
}
export function toWork_viewportLeave(event) {
myvar = setTimeout(() => { $w("#imageX1").scrollTo()}, 3000 )
}
export function menu_viewportEnter(event) {
clearTimeout(myvar)
}
Where is it possible to see the strange result-behaviour?