Scroll Effect - Scale In-Out

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ต.ค. 2024

ความคิดเห็น • 69

  • @Nordobali
    @Nordobali 7 หลายเดือนก่อน +13

    Ive never thought I'd find one of the coolest effects in a video with 500 views. Great work, keep it up!!

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      Thank you!

  • @dieg0liv
    @dieg0liv 7 หลายเดือนก่อน +8

    This looks great! Happy to see my website being used as an example here, and awesome work replicating the effect in Wix Studio!

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      I really appreciate your work! Thank you!

  • @prathamgokani
    @prathamgokani 7 หลายเดือนก่อน +4

    You always push the limits of what can be achieved using Wix Studio! Thanks for this amazing tutorial!

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      Thank you!

  • @cweb1988
    @cweb1988 7 หลายเดือนก่อน +3

    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.

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      Thank you, appreciate it!

  • @MikeyB-m3g
    @MikeyB-m3g หลายเดือนก่อน

    Bravo! This was an excellent tutorial on a very cool animated entrance. Thank you much!

  • @brianabaptiste2169
    @brianabaptiste2169 4 หลายเดือนก่อน

    This was incredibly helpful for an ongoing project. Can't thank you enough for sharing!

    • @Studio-Il
      @Studio-Il  4 หลายเดือนก่อน

      Thank you!

  • @jtreignz
    @jtreignz 3 หลายเดือนก่อน

    Was looking to add a neat feature to my about page, this was absolutely perfect! Thanks for the great tut! 💚

  • @staticmotion1628
    @staticmotion1628 7 หลายเดือนก่อน +2

    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

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      Thank you!

  • @lovinjazzinvegas
    @lovinjazzinvegas 5 หลายเดือนก่อน

    Amazing!! Thanks for this!

  • @akinnusoyejoshua7057
    @akinnusoyejoshua7057 5 หลายเดือนก่อน

    super helpful, great work.

    • @Studio-Il
      @Studio-Il  5 หลายเดือนก่อน

      Thank you!

  • @faltonito
    @faltonito 5 หลายเดือนก่อน

    This is legitimately amazing. Instant sub!

    • @Studio-Il
      @Studio-Il  5 หลายเดือนก่อน

      Thank you!

  • @elenakasyan13
    @elenakasyan13 5 หลายเดือนก่อน

    Thank you!

  • @totolistudio
    @totolistudio 7 หลายเดือนก่อน

    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 :)

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      😄 Thank you!

  • @178rohan
    @178rohan 7 หลายเดือนก่อน

    Subbed this is insane!

  • @razkeren2787
    @razkeren2787 7 หลายเดือนก่อน +1

    תודה ושבת שלום!

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      😄 שבת שלום!

  • @pikkuGH
    @pikkuGH 7 หลายเดือนก่อน +1

    you are best!

  • @אורשרון-ב6ע
    @אורשרון-ב6ע 2 หลายเดือนก่อน

    Hi! I love your tutorials so much, thank you for that!
    Is there a way to contact you for a real small question? 🙏🏼🙏🏼
    thank you again!

  • @milamilayamilamila4978
    @milamilayamilamila4978 6 หลายเดือนก่อน

    THANKS!!!!!!

  • @pariah2k9
    @pariah2k9 5 หลายเดือนก่อน

    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.

  • @SeapupAU
    @SeapupAU 5 หลายเดือนก่อน

    It works fine but have you seen it on mobile? its slightly laggy

  • @BrodyJones
    @BrodyJones 5 หลายเดือนก่อน

    Any chance you could post this as a template?

  • @daniell1676
    @daniell1676 4 หลายเดือนก่อน

    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!

  • @michaeljohnramos-d4j
    @michaeljohnramos-d4j 6 หลายเดือนก่อน

    can you make text scroll animation

  • @Seaflower10
    @Seaflower10 5 หลายเดือนก่อน

    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?

    • @Seaflower10
      @Seaflower10 5 หลายเดือนก่อน

      Went through the comments now. Is it perhaps Paralax scrolling?

    • @Seaflower10
      @Seaflower10 5 หลายเดือนก่อน

      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

    • @Seaflower10
      @Seaflower10 4 หลายเดือนก่อน

      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

  • @ishaandinesh2845
    @ishaandinesh2845 4 หลายเดือนก่อน

    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

    • @Studio-Il
      @Studio-Il  4 หลายเดือนก่อน +1

      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

    • @ishaandinesh2845
      @ishaandinesh2845 4 หลายเดือนก่อน

      @@Studio-Il Thanks for the response, I'll follow your advice, appreciate it!

    • @Studio-Il
      @Studio-Il  2 หลายเดือนก่อน

      @@ishaandinesh2845 Get your free template - I would appreciate it if you could give your feedback:
      www.wix.com/marketplace/template/93d361ce-b775-453e-8121-ac85451336f7?entry=gallery_page

    • @ishaandinesh2845
      @ishaandinesh2845 2 หลายเดือนก่อน

      @@Studio-Il Thanks for sharing, let me give it a detailed look and share my feedback.

  • @sholas2088
    @sholas2088 5 หลายเดือนก่อน

    Can you do this on editor x similarly in design process too?

  • @ogulcankaya7609
    @ogulcankaya7609 5 หลายเดือนก่อน

    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?

  • @aljames7345
    @aljames7345 6 หลายเดือนก่อน

    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?

    • @Studio-Il
      @Studio-Il  6 หลายเดือนก่อน +1

      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

    • @aljames7345
      @aljames7345 6 หลายเดือนก่อน

      @@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.

  • @imadetoni-osagie9855
    @imadetoni-osagie9855 6 หลายเดือนก่อน

    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?

  • @BrodyJones
    @BrodyJones 5 หลายเดือนก่อน

    Would you consider posting this as an editable template? Awesome work!

    • @Studio-Il
      @Studio-Il  2 หลายเดือนก่อน +1

      Get your free template - I would appreciate it if you could give your feedback:
      www.wix.com/marketplace/template/93d361ce-b775-453e-8121-ac85451336f7?entry=gallery_page

    • @BrodyJones
      @BrodyJones 2 หลายเดือนก่อน

      @@Studio-Il Ahh this is amazing, thank you so much! I definitely will!

  • @adrianaboluarte-neves9055
    @adrianaboluarte-neves9055 3 หลายเดือนก่อน

    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?

    • @Studio-Il
      @Studio-Il  3 หลายเดือนก่อน

      Check your container height, min height, grid row height and make sure you don't have content that is too big

    • @adrianaboluarte-neves9055
      @adrianaboluarte-neves9055 3 หลายเดือนก่อน

      @@Studio-Il Thank you so much I will try that!

    • @Studio-Il
      @Studio-Il  2 หลายเดือนก่อน

      @@adrianaboluarte-neves9055 Get your free template - I would appreciate it if you could give your feedback:
      www.wix.com/marketplace/template/93d361ce-b775-453e-8121-ac85451336f7?entry=gallery_page

  • @kennygo5053
    @kennygo5053 6 หลายเดือนก่อน

    why you need the trigle line? without having the line, not possible?

    • @Studio-Il
      @Studio-Il  6 หลายเดือนก่อน +1

      To aiming the animations precisely

  • @renovatio6971
    @renovatio6971 6 หลายเดือนก่อน

    I love it, is there anyway to have your template with this one pls.? hardcore fan from Central London.

    • @Studio-Il
      @Studio-Il  2 หลายเดือนก่อน

      Get your free template - I would appreciate it if you could give your feedback:
      www.wix.com/marketplace/template/93d361ce-b775-453e-8121-ac85451336f7?entry=gallery_page

  • @tartaria936
    @tartaria936 3 หลายเดือนก่อน

    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
      @Studio-Il  3 หลายเดือนก่อน

      Hey,
      Send link to your live site I'll try to find from were you are getting the height

    • @tartaria936
      @tartaria936 3 หลายเดือนก่อน

      @@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

    • @Studio-Il
      @Studio-Il  2 หลายเดือนก่อน

      @@tartaria936Get your free template - I would appreciate it if you could give your feedback:
      www.wix.com/marketplace/template/93d361ce-b775-453e-8121-ac85451336f7?entry=gallery_page

  • @dustinz8426
    @dustinz8426 6 หลายเดือนก่อน

    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.

    • @Studio-Il
      @Studio-Il  2 หลายเดือนก่อน

      Get your free template - I would appreciate it if you could give your feedback:
      www.wix.com/marketplace/template/93d361ce-b775-453e-8121-ac85451336f7?entry=gallery_page

  • @Rogerde3Aristas
    @Rogerde3Aristas 7 หลายเดือนก่อน

    does this works in editor x?

    • @Studio-Il
      @Studio-Il  7 หลายเดือนก่อน

      No.
      Editor X does not have scrolling animations