Jump to content
Search Community

GSAP ScrollMagic delay

refael_b test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys, I would appreciate any help....

This is something very simple using GSAP and ScrollMagic. For some reason the delay is not working.

The first row of images are being revealed all together. I am trying to add a slight delay ...  each row reveals 3 images where each image in each row revealed with a slight delay. Any help?

See the Pen aeZgPQ by IlanL (@IlanL) on CodePen

Link to comment
Share on other sites

That's behaving exactly as expected. You're targeting each item. If you want three images per row and a stagger reveal of those images, you need to redo your html a bit. Place three items per row and then target the rows in your each() loop instead of each item.

 

Make sense?

 

Happy tweening.

 

  • Like 2
Link to comment
Share on other sites

Hi Pointc thank you so much! 

I’m nit sure I understand. This is flexbox row. Do you mean I have to create an “object-box” for each ? Will it make any difference? Can you maybe explain or edit my codepen? 

Link to comment
Share on other sites

Thank you so much. This is what I did. I am still not happy with the fact that the first two row now showing without a delay when the window viewport containing the the first rows. In my way it should start with the first row .... first image .... end the row and the 3 images and then start the second row etc... 

 

See the Pen oKBEaY by IlanL (@IlanL) on CodePen

Link to comment
Share on other sites

Speaking as a designer and a programmer I find this totally useless. I have to close the "object-row" on every 3 items (photos) that means I cannot have 2 items in a row and the 3rd item will take a separate row (one item will be left on the entire row). I guess the "stagger" should no be limited in that way as it has no point in real world beside having just one item.

Link to comment
Share on other sites

The stagger works just fine. Your original post said you wanted three images per row. Now you want between 1-3 images per row depending on screen size. The problem in your original pen is your each() loop targeted the .item overlay. You then tried to stagger the target, but each target was only 1 element. It's hard to stagger one item. If you're trying for a flex layout with varying numbers of images in each row, then no, you probably wouldn't want to wrap those in a parent div. 

 

The problem with what you're doing is you don't know how many elements will be in each row until you know the screen size. If you want each row to trigger a stagger of its children, you need to figure out how many elements are in each row and group them so they have some kind of relationship. You could probably put them into an array and create a tween and trigger for each array of targets.

  • Like 2
Link to comment
Share on other sites

Thank you  again. I am frustrated. This is flexbox grid. The website is dynamic (php & mysql) so it can be 10 items or 9 items.

mobile view it should have 1 item per row and stagger works great. ipad view it should have 2 items and desktop view 3 items. 3 items is max per row.

How can one resolve this? I would appreciate an example. 

Link to comment
Share on other sites

Off the top of my head I'd say loop through and get the distance from the top for each element by using getBoundingClientRect(). Based on that position you can add the matching ones to an array or possibly give them a class. By doing it that way, you would only need one trigger with an offset based on any given row's distance from the top. 

 

Hopefully that makes sense. Sorry, I don't really know of any examples to show you.

 

 

  • Like 2
Link to comment
Share on other sites

Mikel , thank you so much! I really appreciate your help!

I already went and wrote a whole bunch of javascript to wrap and unwrap the items with the "object-row" depending on the screen size.

I will take a look again at your solution which I believe could be great!!!

While writing the javascript I was thinking how can it be that such a wonderful library as GSAP has no support for such an easy task! I wonder what other coder are using if not GSAP. I also think that GSAP can start support scroll? I mean we all use it with one scrolling library or another, I am seriously amazed! I learned GSAP with almost every example yet when getting into a "real world" project I got stuck.

I will get back to you with the final solution if you are interested. And again, thank you so much!

  • Like 1
Link to comment
Share on other sites

If you want to make this work with ScrollMagic, here's a quick demo of what I was advising — measure each elements position from the top. Here I've just created a bunch of divs in a grid and looped through to create arrays which act as 'rows' in a master array of targets. I then create a new ScrollMagic scene for each 'row' and use the .staggerTo() method on the targets.

 

Note: This is not responsive. It will only calculate on page load. You'll have to kill and recreate the ScrollMagic scenes on resize, but this should get you started. 

 

See the Pen aeJxJE by PointC (@PointC) on CodePen

 

Happy tweening.

  • Like 4
Link to comment
Share on other sites

On 7/29/2019 at 10:03 AM, refael_b said:

Thank you  again. I am frustrated. This is flexbox grid. The website is dynamic (php & mysql) so it can be 10 items or 9 items.

mobile view it should have 1 item per row and stagger works great. ipad view it should have 2 items and desktop view 3 items. 3 items is max per row.

How can one resolve this? I would appreciate an example. 

 

Flexbox isn't designed for grids. That's what CSS grid layouts are for.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

 

You can listen for media queries to change the layout and recreate your animations.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...