Jump to content
Search Community

rami essam

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by rami essam

  1. @ZachSaucier Hello Zach thank you so much, yea it does seems complicated for a beginner like me

    how ever when i add loading lazy there is an issue with scrolling since i'm using scrollTrigger to achieve smooth scrolling for the whole website

     

    just for you to remember here is the code i copied from another post on here to achieve whole page smooth transition 


    JS

    
    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
    function smoothScroll() {
      const container = document.querySelector('#_layout');
      let height;
      function setHeight() {
        height = container.clientHeight;
        document.body.style.height = `${height}px`;
      }
      ScrollTrigger.addEventListener('refreshInit', setHeight);
    
      gsap.to(container, {
        y: () => -(height - document.documentElement.clientHeight),
        ease: 'none',
        scrollTrigger: {
          trigger: document.body,
          start: 'top top',
          end: 'bottom bottom',
          scrub: 0.9,
          invalidateOnRefresh: true,
        },
      });
    }
    smoothScroll();

     

    HTML

    <main id="_app">
      <div id="_layout">
      	<!-- content -->
      </div>
    </main>

     

    CSS

    
    #_app {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    
    #_layout {
      padding: 1.5vw;
      margin: 0 auto;
      overflow: hidden;
    }

     

    If the question is complicated or annoying please ignore it, 

    if you just can explain to me why there is scrolling issues when i add loading lazy with this code 

     

    what happens is when i scroll i can't see the  section where i added loading lazy to the images

    like the scrollbar comes to and end early on like this section doesn't exist

     

    thank you in advance

  2. I was checking the code pen for lazy load images from the documentation here 

    See the Pen OJMaEOP by GreenSock (@GreenSock) on CodePen

    I'm a beginner so bare with me, why is images have both src and data-src, shouldn't it just be data-src then it will be loaded later when it comes to viewport ?

     

    also what if I'm using picture to load webp images,

    do I just add dara-srcset to the source and the class and data-src to the image like so  ?

     

    <picture>
       <source type="image/webp" data-srcset="example.webp">
       <source type="image/jpeg" data-srcset="example.jpg">
       <img src="example.jpg" data-src ="example.jpg" class="lazy" alt="">
     </picture>

     

    See the Pen vYGYaPx by dovisally (@dovisally) on CodePen

  3. Is there is any built in functionality to animate only when an element comes to view port ?

    or still i have to use something like intersection api or a third party library ?

     

    and if gsap doesn't have that feature yet, is there is any plans to add it in the future ?

×
×
  • Create New...