Scroll Effect - Scale In-Out

Поділитися
Вставка
  • Опубліковано 25 сер 2024

КОМЕНТАРІ • 69

  • @Nordobali
    @Nordobali 6 місяців тому +13

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

  • @dieg0liv
    @dieg0liv 6 місяців тому +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  6 місяців тому

      I really appreciate your work! Thank you!

  • @prathamgokani
    @prathamgokani 6 місяців тому +4

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

  • @user-cl7ko4jr3k
    @user-cl7ko4jr3k 5 днів тому

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

  • @cweb1988
    @cweb1988 6 місяців тому +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  6 місяців тому

      Thank you, appreciate it!

  • @brianabaptiste2169
    @brianabaptiste2169 2 місяці тому

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

  • @jtreignz
    @jtreignz 2 місяці тому

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

  • @staticmotion1628
    @staticmotion1628 6 місяців тому +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

  • @lovinjazzinvegas
    @lovinjazzinvegas 4 місяці тому

    Amazing!! Thanks for this!

  • @elenakasyan13
    @elenakasyan13 4 місяці тому

    Thank you!

  • @akinnusoyejoshua7057
    @akinnusoyejoshua7057 3 місяці тому

    super helpful, great work.

  • @pikkuGH
    @pikkuGH 6 місяців тому +1

    you are best!

  • @faltonito
    @faltonito 3 місяці тому

    This is legitimately amazing. Instant sub!

  • @razkeren2787
    @razkeren2787 6 місяців тому +1

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

    • @Studio-Il
      @Studio-Il  6 місяців тому

      😄 שבת שלום!

  • @totolistudio
    @totolistudio 5 місяців тому

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

  • @178rohan
    @178rohan 5 місяців тому

    Subbed this is insane!

  • @user-ln5ci6ro6u
    @user-ln5ci6ro6u Місяць тому

    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!

  • @pariah2k9
    @pariah2k9 3 місяці тому

    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.

  • @ogulcankaya7609
    @ogulcankaya7609 4 місяці тому

    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?

  • @milamilayamilamila4978
    @milamilayamilamila4978 5 місяців тому

    THANKS!!!!!!

  • @SeapupAU
    @SeapupAU 4 місяці тому

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

  • @user-sq2ug9pl6r
    @user-sq2ug9pl6r 4 місяці тому

    can you make text scroll animation

  • @BrodyJones
    @BrodyJones 4 місяці тому

    Any chance you could post this as a template?

  • @Seaflower10
    @Seaflower10 4 місяці тому

    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 4 місяці тому

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

    • @Seaflower10
      @Seaflower10 3 місяці тому

      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 3 місяці тому

      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

  • @daniell1676
    @daniell1676 3 місяці тому

    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!

  • @kennygo5053
    @kennygo5053 5 місяців тому

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

    • @Studio-Il
      @Studio-Il  5 місяців тому +1

      To aiming the animations precisely

  • @ishaandinesh2845
    @ishaandinesh2845 3 місяці тому

    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  3 місяці тому +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 3 місяці тому

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

    • @Studio-Il
      @Studio-Il  29 днів тому

      @@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 27 днів тому

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

  • @aljames7345
    @aljames7345 4 місяці тому

    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  4 місяці тому +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 4 місяці тому

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

  • @sholas2088
    @sholas2088 3 місяці тому

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

  • @adrianaboluarte-neves9055
    @adrianaboluarte-neves9055 2 місяці тому

    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  2 місяці тому

      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 2 місяці тому

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

    • @Studio-Il
      @Studio-Il  29 днів тому

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

  • @imadetoni-osagie9855
    @imadetoni-osagie9855 4 місяці тому

    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?

  • @dustinz8426
    @dustinz8426 5 місяців тому

    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  29 днів тому

      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 2 місяці тому

    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  2 місяці тому

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

    • @tartaria936
      @tartaria936 2 місяці тому

      @@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  29 днів тому

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

  • @BrodyJones
    @BrodyJones 4 місяці тому

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

    • @Studio-Il
      @Studio-Il  29 днів тому +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 29 днів тому

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

  • @renovatio6971
    @renovatio6971 5 місяців тому

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

    • @Studio-Il
      @Studio-Il  29 днів тому

      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

  • @user-sq3yy7nk3u
    @user-sq3yy7nk3u 6 місяців тому

    does this works in editor x?

    • @Studio-Il
      @Studio-Il  6 місяців тому

      No.
      Editor X does not have scrolling animations