Jump to content
GreenSock

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

GSAP ScrollMagic delay

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

Share this post


Link to post
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

Share this post


Link to post
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? 

Share this post


Link to post
Share on other sites

 

Hey @refael_b,

 

16 hours ago, PointC said:

Place three items per row and then target the rows in your each() loop instead of each item.

 

That is the point ... as @PointC said very correctly.

Here with 2 in a row:

 

See the Pen EqZEzb by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hey @refael_b,

 

If "triggerHook: 'onEnter' " both rows are directly triggered.

If e.g. "triggerHook: 0.5 " only the first.

 

Try it ...

 

Mikel

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

 

Hey,

 

It's definitely not a solution, but maybe a direction of thinking

 

See the Pen qeRzKV by mikeK (@mikeK) on CodePen

 

I wish you success ...

Mikel

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi @refael_b,

 

Try the Intersection Observer - a native way, no libraries!

 

See the Pen jgygXL by mikeK (@mikeK) on CodePen

 

You can find a good tutorial here

 

Best regards

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

Hi Mikel,

 

I have just tried it ... 

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

 seem to behave the same or  am i doing something wrong  ?

Share this post


Link to post
Share on other sites

Hey @refael_b,

 

Sure, you can copy the code.
But please play a little with the parameter: for example delay: i-i * 0.6 + 0.005

I'm not an expert and can not explain you the specific delay effect or derive an optimal factor.

Our math genie has holidays.

 

See the Pen ZgePYN by mikeK (@mikeK) on CodePen

 

Effort makes smart ... 

Mikel

 

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@OSUblake aren't you still on vacation? 🏝️

 

The pull of the forum is just too strong for you to resist and nobody even mentioned canvas in this thread. :D

  • Like 2
  • Haha 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×