How to Create Horizontal Scroll | Wix Studio
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- In the next tutorial we will learn how to create horizontal scrolling animations in Wix Studio without code.
If you managed to create one yourself, I would appreciate it if you could share in the comments.
Live example:
iloveditorx.wixstudio.io/hori...
#wixstudio #nocode #scroll - วิทยาศาสตร์และเทคโนโลยี
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
Thanks for the video, Very informative, I sat down step by step and was able to accomplish the mission!!! 💪💪💪
Im so happy to hear!
Thank you for your feedback
Man, this was truly the best tutorial video I've ever watched about Wix. Thank you!
Thank you!
Exactly what I had been looking for. Thank you so much! :)
Thanks for this. You are a great resource and these videos are very helpful.
I also don’t mind when you forget or make mistakes along the way because when you correct it, it actually explains things more clearly.
Thank you!
Thank you so MUCH! It helped me a lot.
I just found your channel and i judy subscribed, you are a blessing to me
Thank you for this
Nice to receive such a message, thank you!
Very useful, thank you for always bring amazing ideas to spice up our designs.
Thank you!
@@Studio-Il quick one, have you tried adding page loaders to WIX Studio websites, and how do I implement it? Preferably without code, but if you have a way to do it with code I still won't mind.
Thanks. Your about the only person who has really explained VPH(W) so it makes more sense. I need to try this with my own designs and see how well I get on.
Can't help but feel Wix Studio needs updating when it comes to Horizontal Scroll as it seems overly complicated for what you are trying to achieve.
My third box dropped down and have no idea why. Also what's the easiest way to work on each element once its off screen I can't seem to understand how to manage the boxes with it being off screen. So difficult but this has helped a lot.
No I tried it with the design I'm looking for and cannot get it to work without scrolling off the screen. This is going to be the pain of my life. I can design a site without this but really want to find the easiest solution. Just being able to change little aspects does not seem to be easy. I can't get the images to stay still without disappearing off screen. If only there was a sticky system for scroll.
Hii, how can you make the scroll action/view snap to each slide? So that it doesn't scroll linearly, but is briefly held in place for each slide? Much appreciate your help!
this is an amazing tutorial man thank you so much !!!!!!!!!!!!
Thank you!
Thanks for video
Thanks bestie! Your tutorial helped me achieve what I wanted on my website. I also had fun with your voiceover. NYAYAHHA Overall, 100/10! Please make more content LIKE THIS PRETTY PLEASE ..
Thank you bestie 😄
Hey bestie! I'm trying to get my mobile website to look exactly like the desktop version. I'm not sure what height to use for mobile or how to make it switch between the two. Any advice?
@katreenayvesDelPuerto The wrapper container should be as desktop - 100vh
The Flexbox items can be in any size you want but not more than 100vh
@@Studio-Il gotcha bestie.but... i have another problem ekk.. i checked the site using my Samsung phone the text is over laping ekk...any shortcut advice to this? coz in my iPhone its working well. or I need to edit per device?
@@katreenayvesDelPuerto To avoid overlapping you need to use layout tools such as Stack or Grid
Thanks a lot bro
Amazing video. Im having an issue with my items as they are 100vh but still getting cut off from the bottom.
So my issue is when I’m trying to add the animation to it, the distance is not changing at all from 63vw, is it only me and I can just let wix know about it?
Same issue here. So far no answear
can u explain more
Do you still have the issue?
this is awesome, how do i make multiple elements inside flexbox item and make overlap animation on each other on scroll, like a man and overlapping a t shirt on him on scroll
I've never try it
when i follow the instruction, the scroll happens in the preview 0f the wix editor but after publishing the site - scroll does not work on the browser
Please do the tutorial on how to create horizontal scrolling animations without a code
Beginner question. But for some reason, my Text in the middle of the item is super low, instead of centered. Even though it is center when I am editing. How do I fix this? Otherwise, great video!
Thank you!
Check if you have unwanted height from the text parents elements. It can come from the height, min-height, element margin or grid row height
Hi thanks for your video, very cool animation ! It seems i have a problem with the scroll fonction. When i make my navigator full screen or change de dimensions of the window, the animation start on unwanted time or create a diagonal movement. Is there a way to fix it ? Or had i make a mistake ? Thanks for your help !
Hey,
You are right. After you change the window size you need to refresh the tab to see the animations correctly.
I hope it will be fixed soon.
@@Studio-Il Thanks ! I just ajusted by making bigger the gap before and after the line, It helps to avoid this
How do I create a horizontal scroll with only 40% more width one time?
I have an issue where 100VH and 100VW make the 3 boxes inside the flexbox lager than my actual viewbox, happens on multiple devices too where the page extends beyond the viewport. Any ideas?
Make sure you don't have unwanted height.
It can come from the container grid.
If that's the case, you have 2 solutions:
1. Drag the bottom edge of the container all the way up and release. The container will jump back to the height you set or to the content height.
2.Add CSS grid to the container and make sure that you don't have minmum height in pixels woth big number.
For some reason this isn’t translating to the mobile view. The content is stretched unevenly. Do you have a suggestion on how to solve?
Check if you have unwanted heights somewhere. Check the elements height / min-height or grid row height.
Hey man, love the tutorial everything worked perfectly, it shows the scroll on PREVIEW however when I publish the site it could scroll on the live site :( any reason?
Hey, check if "Reduce motion" is active on your device.
@@Studio-Il haha yes it was that. Thank you so much
@@xnorex Yes!!! 💪
Thanks mann lots of lovee@@Studio-Il
I’ve been trying to do this for 2 days for some reason my section won’t stick. Is it possible to upload a template to wix please?
You should add sticky to the layouter not the section
Please help, when I do maximum content (Time stamp 9:00) It doesn't make it into one with the rest outside the box. It's still on top of each other
Set the repeater layout to Cards
On the inspector panel, I see animation and effects and not interactions, what is the reason?
Hey,
I think it's exist only for Wix Studio editor
I followed every step till 10:21 but when I looked in the preview there where no elements from the flexbox visible.
Pls help me
Thanks you for the tutorial.... but its not working on real-time mobile device.
It should. Check if "Reduce motion" is active in your device
Hi, I tried replicating this on my site but whenever I try to change the flexbox to
"maxcont" the "item 01" automatically aligns to the left, leaving the "item 02" as the first one. I've tried this like 3 times, same results. What should I do?
Hey,
From the inspector panel, try to change the items direction or alignment. If it's not working, you can reorder items from the layers panel
@@Studio-Il thank you. It's working fine now💞💕
How did you get it to work? I am having the same issue. @@vivianokeke4867
No matter what I do the items do not flow in one direction. There is always an items on the left and right of the canvas. @@Studio-Il
Hi! Would you mind sharing how you fixed this? I’m having the same issue. Thanks so much in advance!
why does my wix editor doesnt look like this one, mine is so limited
Are you on Wix Studio or regular Wix?
I'm using Wix Studio editor
thanks