Great video man thank you been loving your channel I'm new to wix studio been working with web flow for 3 years now I'm not switching from webflow i love it but I'm trying to design easy friendly templates to sell and forget so these video help so much and YESSS the most frustrating thing is that bug of where you wrapper element/container wont always work properly i find myself re adjusting it to the proper height all the time sooooooo annoying wix need to fix that along with other bugs
Great Tutorial! Works perfectly and easy to customize. Unfortunately the round corners of the containers do not work as if ill in a streched content. any tipps whats going on? Thx in advance! Edit: Workaround -> Content in 3. container must not be streched. also helped with weird blured container edges.
Hey, no matter which animation I use on Wix Studio, the animation is very choppy on the smartphone (iPhone 14 Pro)... Is there a trick to this, or should I keep animations to a minimum on mobile? And thanks for the great tutorials, you've been a huge help!
So I created a website following you step by step. It scrolls decent on chrome but does not scroll smoothly in safari. Is there a smooth scroll code you can give me to make it scroll well on all browsers?
Thank you so much for teaching us this! Thanks to you I achieved the effect itself to great result. What I can't figure out is how to make the page background image move as fluid as in the Webflow example. If I set an image to be bigger than the cell it will mess up the whole design. Yet if I set it to full size it won't look right with the tilt animation. Do you think it can be done in Wix Studio somehow?
Unless proven wrong I think it can't be done as in the Webflow example . No matter the settings and what I try the animation will mess up the corners of the underlying container regardless of what animation I choose. I guess it's a bug
I've been speaking with Wix customer support and we concluded that it can't be achieved with containers. The response I finally got "I'm running into the exact same issue. After doing some research learned that the rounded corners don't actually change the shape of the container, it only modifies the way the background of the container is displayed, which means *technically* the image isn't actually overflowing when it exceeds the rounded corner. It only counts as overflow when it goes outside of the normal squared boundary of the container." Maybe it's achievable using a vector as the front and place an image inside of it. Either way, after multiple hours trying this I give up for now
I keep running into an issue when I add the 3rd animation to the 2nd trigger. It keeps defaulting to the 2nd animation of the sequence whenever I try to add the third.
Hey, can you give me some advice on something? I want to have a single image slide down from top to bottom as I scroll on the website's landing screen. I've been struggling to achieve this. Do you have any tips?
This was incredibly helpful, searched everywhere for a video like this, appreciate it. One Doubt. if you (or anybody here) could help, that'd be great: I followed your instructions to the T, but the box is not fitting on my desktop screen, (the height is too much), and I did some messing around (I have no idea what I'm doing) and now it fits, but I had to remove/change a lot of the calc. height, min-height etc. so now it fits well on a large monitor, spacing gets a little more awkward on a smaller laptop screen but it's manageable. TLDR: The slide was too big for the screen, how can I ensure the first box is seen in full on screens perfectly? Thanks a lot
Hi, this is a bit tricky. This design is not so suitable if you have a lot of content in each container because the height of the container is fixed (according to the height of the screen) and if the content is larger than the height of the screen, the content will be cut. You need to make sure that all the content scales proportionally as much as possible. Another thing you can do to make sure to prevent a situation where the content is cut off is to set the container to "overflow scroll" so that even if the content is higher than the height of the screen it will still be possible to scroll inside the container to see the content that slides out
I was trying to add the Paralax image in Wix Studio by connecting to an image in my CMS collection. However when done that way through CMS, the paralax image doesn't scroll correctly (try and you will see). Was wondering if you might have a coding workaround to make this work flawlessly when connected to CMS?
I found that when the length of the page or section changes it causes the animations to lose their settings. This can happen when the information is dynamic and therefore when elements are added to a page from the database it increases the length of the page and can cause this problem. This shouldn't happen so I would report it as a bug
@@Studio-Il Thank you. Yes exactly my thoughts, a bug. I did report it but they are not dealing with it as a bug and have asked me to add as a 'feature request' which is plain wrong. This paralax feature is great and should work as intended but doesnt so really should be fixed as priority.
im watching this video for second time in two days. still trying to fit first container into screen so it doesnt go down and its has 20px borders. but im not able to do it. it still scrolls. even i have 100vh - 50 and a moved that bugged css grid row line up. nothing works
@@Studio-Il Hello my friend. thanks for your concern. i actually solved it myself by changing layout. i used three separated sections instead of one with css grid. thanks a lot anyway
Ive never thought I'd find one of the coolest effects in a video with 500 views. Great work, keep it up!!
Thank you!
This looks great! Happy to see my website being used as an example here, and awesome work replicating the effect in Wix Studio!
I really appreciate your work! Thank you!
Was looking to add a neat feature to my about page, this was absolutely perfect! Thanks for the great tut! 💚
You always push the limits of what can be achieved using Wix Studio! Thanks for this amazing tutorial!
Thank you!
the man, the myth, the legend! Thanks for showing how to do cool things. Using a line as a trigger is a super helpful tip/technique.
Thank you, appreciate it!
Amazing!! Thanks for this!
This was incredibly helpful for an ongoing project. Can't thank you enough for sharing!
Thank you!
Subbed this is insane!
Thank you!
This is legitimately amazing. Instant sub!
Thank you!
super helpful, great work.
Thank you!
Great video man thank you been loving your channel I'm new to wix studio been working with web flow for 3 years now I'm not switching from webflow i love it but I'm trying to design easy friendly templates to sell and forget so these video help so much and YESSS the most frustrating thing is that bug of where you wrapper element/container wont always work properly i find myself re adjusting it to the proper height all the time sooooooo annoying wix need to fix that along with other bugs
Thank you!
You sound just like Yanay from Wix! I love your videos! You are awesome...thank you so much for taking the time to teach us :)
😄 Thank you!
תודה ושבת שלום!
😄 שבת שלום!
you are best!
THANKS!!!!!!
Great Tutorial! Works perfectly and easy to customize.
Unfortunately the round corners of the containers do not work as if ill in a streched content. any tipps whats going on? Thx in advance!
Edit: Workaround -> Content in 3. container must not be streched. also helped with weird blured container edges.
Hey, no matter which animation I use on Wix Studio, the animation is very choppy on the smartphone (iPhone 14 Pro)... Is there a trick to this, or should I keep animations to a minimum on mobile? And thanks for the great tutorials, you've been a huge help!
I love it, is there anyway to have your template with this one pls.? hardcore fan from Central London.
Would you consider posting this as an editable template? Awesome work!
Can you do this on editor x similarly in design process too?
So I created a website following you step by step. It scrolls decent on chrome but does not scroll smoothly in safari. Is there a smooth scroll code you can give me to make it scroll well on all browsers?
Thank you so much for teaching us this! Thanks to you I achieved the effect itself to great result. What I can't figure out is how to make the page background image move as fluid as in the Webflow example.
If I set an image to be bigger than the cell it will mess up the whole design. Yet if I set it to full size it won't look right with the tilt animation. Do you think it can be done in Wix Studio somehow?
Went through the comments now. Is it perhaps Paralax scrolling?
Unless proven wrong I think it can't be done as in the Webflow example . No matter the settings and what I try the animation will mess up the corners of the underlying container regardless of what animation I choose.
I guess it's a bug
I've been speaking with Wix customer support and we concluded that it can't be achieved with containers. The response I finally got
"I'm running into the exact same issue. After doing some research learned that the rounded corners don't actually change the shape of the container, it only modifies the way the background of the container is displayed, which means *technically* the image isn't actually overflowing when it exceeds the rounded corner. It only counts as overflow when it goes outside of the normal squared boundary of the container."
Maybe it's achievable using a vector as the front and place an image inside of it. Either way, after multiple hours trying this I give up for now
I keep running into an issue when I add the 3rd animation to the 2nd trigger. It keeps defaulting to the 2nd animation of the sequence whenever I try to add the third.
Hey, can you give me some advice on something? I want to have a single image slide down from top to bottom as I scroll on the website's landing screen. I've been struggling to achieve this. Do you have any tips?
This was incredibly helpful, searched everywhere for a video like this, appreciate it.
One Doubt. if you (or anybody here) could help, that'd be great:
I followed your instructions to the T, but the box is not fitting on my desktop screen, (the height is too much), and I did some messing around (I have no idea what I'm doing) and now it fits, but I had to remove/change a lot of the calc. height, min-height etc. so now it fits well on a large monitor, spacing gets a little more awkward on a smaller laptop screen but it's manageable.
TLDR: The slide was too big for the screen, how can I ensure the first box is seen in full on screens perfectly?
Thanks a lot
Hi, this is a bit tricky. This design is not so suitable if you have a lot of content in each container because the height of the container is fixed (according to the height of the screen) and if the content is larger than the height of the screen, the content will be cut. You need to make sure that all the content scales proportionally as much as possible. Another thing you can do to make sure to prevent a situation where the content is cut off is to set the container to "overflow scroll" so that even if the content is higher than the height of the screen it will still be possible to scroll inside the container to see the content that slides out
@@Studio-Il Thanks for the response, I'll follow your advice, appreciate it!
Love this effect! I've been trying to replicate it but for some reason the third box gets cut off when I publish it, do you know how to fix this?
Check your container height, min height, grid row height and make sure you don't have content that is too big
@@Studio-Il Thank you so much I will try that!
I was trying to add the Paralax image in Wix Studio by connecting to an image in my CMS collection. However when done that way through CMS, the paralax image doesn't scroll correctly (try and you will see). Was wondering if you might have a coding workaround to make this work flawlessly when connected to CMS?
I found that when the length of the page or section changes it causes the animations to lose their settings. This can happen when the information is dynamic and therefore when elements are added to a page from the database it increases the length of the page and can cause this problem. This shouldn't happen so I would report it as a bug
@@Studio-Il Thank you. Yes exactly my thoughts, a bug. I did report it but they are not dealing with it as a bug and have asked me to add as a 'feature request' which is plain wrong. This paralax feature is great and should work as intended but doesnt so really should be fixed as priority.
It works fine but have you seen it on mobile? its slightly laggy
Any chance you could post this as a template?
why you need the trigle line? without having the line, not possible?
To aiming the animations precisely
im watching this video for second time in two days. still trying to fit first container into screen so it doesnt go down and its has 20px borders. but im not able to do it. it still scrolls. even i have 100vh - 50 and a moved that bugged css grid row line up. nothing works
Hey,
Send link to your live site I'll try to find from were you are getting the height
@@Studio-Il Hello my friend. thanks for your concern. i actually solved it myself by changing layout. i used three separated sections instead of one with css grid. thanks a lot anyway
can you make text scroll animation
does this works in editor x?
No.
Editor X does not have scrolling animations