Jump to content
Search Community

Vasyl Shvets

Members

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Posts posted by Vasyl Shvets

    ScrollSmoother in mobile safari issue

    in GSAP

    Posted

    Hi everyone.  I don't write english very well so sorry for that.

     

    To avoid hide / show address bar in mobile safari I use this in css: 

    body, html {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#viewport {
  height: 100vh;
  width: 100vw;
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
}

     

    It solves a lot of problems. For example:

        vh units (when adding 100vh),

        pinned blocks, 

        don't need to use ignoreMobileResize,

        the page does not jump, itc.

     

    The page has totaly fixed position!

     

    But I use ScrollSmoother, and I can't use body anymore. ScrollSmoother is calculating height and adding to the body. 

     

    Maybe, can I tell ScrollSmoother to do his work not with body tag? 

    Or can I fix this another way?

     

     

    p.s I didn't add codepen example as it won't show the problem

     

    Need help with splitText

    in GSAP

    Posted

    For example:

    <div data-split-this-container>
        <div>title first</div>
        <div class="text">text descr</div>
        <div>title second</div>
    </div>

    I have a container, and i need to split all words inside this container. Only element with class "text" i don't need to split, but also animate in turn. 

    So in the end i need to have kind of this animation:

    title > title > text descr > title > second.

     

    Can anybody help?)

    See the Pen QWOpNpo by vasyl-shvets (@vasyl-shvets) on CodePen

    Animate image on scroll

    in GSAP

    Posted

    17 hours ago, elegantseagulls said:

    You'll want to set each photo to 100vh tall, then gsap animate the image from scaleY(0) while you ScrollTrigger scrub that over a 100vh distance. You'll also want to make sure that you use ease: 'none', so that it transforms exactly with the viewport/scroll position

    can you do some little example? I am new in gsap, so it's hard to do it. I will be very appreciated

×
×
  • Create New...