Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Its_Lefty

Members
  • Posts

    7
  • Joined

  • Last visited

Posts posted by Its_Lefty

  1. Okay, this makes sense, thanks!

     

    Unfortunately I couldn't find similar approaches like the one you have proposed and after several hours of trying, I feel like my JS skills are not good enough to realize this at the moment. Maybe someone can help me with the solution.
    If not, it's fine though, since it's just a personal project. I can get rid of the lazy loading and use imagesLoaded instead.

  2. 5 minutes ago, ZachSaucier said:

    Do you mean all images in the row that is about to be revealed, or all images? I hope the first because otherwise there's not too much point in lazy loading them. 

     

    In terms of how to wait for the images to load, there are different techniques you could use. The first that comes to mind for me is to add the images that should be revealed to an array. Then check to see if all of those images that should be revealed have loaded (by checking if they have the loaded class). If they have, animate them in. If not, you could use a GSAP's delayedCall to wait to check some period later and animate them if they've been loaded then. 

     

    Does that make sense?

     

    forEach is just a handy method to iterate through a list. You could just use a for loop like this to replace it:

     

    
    for (var i = 0; i < boxes.length; i++) {
      boxObserver.observe(boxes[i]);
    }

    Or, since you're using jQuery already, you could use jQuery's .each() method like you're doing in the else.


    Thanks a lot, the reveal is now working in the IE as well. :)
     

    Yes, I mean all images in the row that are about to be revealed (not all images). Or do you think that the lazy-loading-part is nonsense nonetheless (if using a sequential animation)?

    The checking for the loaded class and delayedCall looks promising. I'm still new to JS and GSAP so this is over my knowledge. I will try to find an example.

  3. Below is my attempt. The first function in the JS is the GSAP stagger reveal animation (like in the example from above). The columns fade in from the bottom in a sequential animation.
    At the bottom of the JS I initialize the lazy-loading script lozad.js (it has also incluced a polyfill for older browsers): https://apoorv.pro/lozad.js/
     

    Issues:
     

    1.) I think it would be wise to wait for all images to load before the sequential animation starts, right? Is this possible? Unfortunately I don't know how. 
     

    2.) The images and columns stay invisible on the Internet Explorer due to the use of "forEach" from the stagger reveal script. Since my JS knowledge is limited, I don't know how to re-write the code. Maybe there is an elegant way to combine the stagger-reveal-function with the lozad-lazy-loading?
     

  4. edit: updated with example

     

    Hi there!

    I'm currently developing a website with a stagger reveal function on scroll for the divs and images. I came across this thread 

    and this is working nice.

     

    But I need to modify this. My goal:

    • the columns fade-in from the bottom in a sequential animation like the example above
    • the images will only load as soon they are in the viewport (using the IntersectionObserver) so I've added a lazy-loading-script

     

    Explanation for my JS below:

    • the first function in the JS is the GSAP stagger reveal animation (like in the example from above). The columns fade in from the bottom in a sequential animation.
    • at the bottom of the JS I initialize the lazy-loading script lozad.js (it has also incluced a polyfill for older browsers): https://apoorv.pro/lozad.js/
       

    Issues:
     

    1.) I think it would be wise to wait for all images to load before the sequential animation starts, right? Is this possible? Unfortunately I don't know how. 
     

    2.) The images and columns stay invisible on the Internet Explorer due to the use of "forEach" from the stagger reveal script. Since my JS knowledge is limited, I don't know how to re-write the code. Maybe there is an elegant way to combine the stagger-reveal-function with the lozad-lazy-loading?
     

    See the Pen eYOpROp by ItsLefty (@ItsLefty) on CodePen

  5. Thanks so far. I've modified my script (added triggerHook: 1 and duration: '100%').
    Now my parallax-item starts to move as soon it does hit the viewport. But if you keep on scrolling, it does immediately stop as soon the trigger 1 reaches end 1.
     

    On this page the image keeps on moving until it is completely out of the viewport. How can I achieve this?

    Check out the current attempt: 

    See the Pen wVGYmw by ItsLefty (@ItsLefty) on CodePen

  6. Hi there!

    I'm trying to create a scrolling effect like this:

    Scroll / Parallax effect
     

    If you scroll the page down and the image is in the viewport, it will receive a dynamic translate3d on the y-axis between 0% and max. +25% (based on scroll ). If you scroll the page up, it will be reserved (up to -25%).

    I'm still a JS beginner, below you can see my attempt with GASP/ScrollMagic/TweenMax.

     

    Unfortunately this is still not like in the example above. The parallax-item stops moving at a certain point although it is still in the viewport and you keep on scrolling. Moreover the speed is too fast.

    I guess I have to modify the offset and duration ScrollMagic-Options (?) but I don't know what I should exactly do.
    I know that ScrollMagic and animation.gsap are not GSAP products but maybe someone can help me.

     

    Thanks in advance! :)

    See the Pen wVGYmw by ItsLefty (@ItsLefty) on CodePen

×