Jump to content
Search Community

Add a class at intervals to a particular element of an infinitely scrolling (vertical) timeline of varying durations

Jordan Castiel test
Moderator Tag

Recommended Posts

Hi guys!

 

This is my first post ever, I'm new to GSAP and I'm soooooooooo stuck, I need your help :D 

 

I'm creating a series of cards (length varies) that scroll vertically and infinitely, I've been able to achieve that, however, at every point, there should be an active card that appears expanded than the rest and that card is usually the one that's positioned at the middle of the view port...

 

That is, as the cards scroll up vertically, whichever card is at the vertical middle should expand and once it's gone above the middle section of the viewport, the card below it should now become expanded, and so on... so, at any given time, a card should be in focus...

 

I'm VERY new to GSAP and this has kicked my ass for about a month, Please I'd appreciate some help here, Thanks :D 

 

Also, please let me know if my code can be improved...

 

BTW, this is how the expanded card looks in motion:

 

image.thumb.png.a282bc01330e5b26299494276314563d.png


Note: I must also mention that, the way I have this implemented in my actual code  (Gatsby application), each card gets a prop - active - and whenever active is set to true, the classes that cause the expansion are applied...

 

So, a solution that would work out of the box for me is one that updates the state of a particular card whenever it's in the viewport... so, something that checks and updates the prop of the card... if this isn't good for performance I'm ready to stick with whatever works... Thanks so much:

See the Pen jOWxLWw by Jordanirabor (@Jordanirabor) on CodePen

Link to comment
Share on other sites

Hey Jordan and welcome to the GreenSock forums. Based on the title of your post I thought your issue was something a bit more pressing (like maybe someone was dying, hah). This is just a regular question. Maybe next time just include the part after the : :) 

 

There are a lot of ways to set this up. One is using ScrollTrigger and having a different ScrollTrigger for each card.

Another way is to use Draggable's .hitTest method.

Another is to use .elementsFromPoint.

  • Haha 1
Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

Hey Jordan and welcome to the GreenSock forums. Based on the title of your post I thought your issue was something a bit more pressing (like maybe someone was dying, hah). This is just a regular question. Maybe next time just include the part after the : :) 

 

There are a lot of ways to set this up. One is using ScrollTrigger and having a different ScrollTrigger for each card.

Another way is to use Draggable's .hitTest method.

Another is to use .elementsFromPoint.

Whao, thanks for the swift response, Zach.

I'm so sorry for the title, I'm going to edit it right after this!

 

About this question, I've searched the forum but haven't found something that works for me.

 

I do not need the cards to start scrolling on drag or when there's been a scroll into the viewport. It should start scrolling vertically, and infinitely on page load as it currently does.

 

Where my problem is... I want to always know the card that's positioned in the middle of the containing box so I either add styles or update the props... Like, I always want one active card :D 

 

Please, I need your help :D 

Link to comment
Share on other sites

In order to help you with the actual implementation we need more information. How are the cards being moved? Using a tween like you are doing in the demo? Or by the regular scrolling of the page? I understand that there are an infinite number of cards but that doesn't explain the mechanism of movement. If it's moving using a tween/timeline, how are you creating that animation? Will the page be scrollable like your demo is? If so, do you expect the middle element regardless of the scroll position to be the one that's active or the one in the middle if the scroll position is 0?

 

Lots of unknowns at this point. 

Link to comment
Share on other sites

24 minutes ago, ZachSaucier said:

In order to help you with the actual implementation we need more information. How are the cards being moved? Using a tween like you are doing in the demo? Or by the regular scrolling of the page? I understand that there are an infinite number of cards but that doesn't explain the mechanism of movement. If it's moving using a tween/timeline, how are you creating that animation? Will the page be scrollable like your demo is? If so, do you expect the middle element regardless of the scroll position to be the one that's active or the one in the middle if the scroll position is 0?

 

Lots of unknowns at this point. 

Yeah, I get that.

 

I just made some updates to the demo so it's a lot closer to the real thing at this moment.

 

Please, put the pen at 0.5x so it doesn't scroll :) 

 

The cards are being moved using a timeline like in the demo.

 

First, the list of cards is cloned, then the actual cards (not the cloned set) are animated by updating its y position, then the cloned list is inserted directly underneath to give the illusion of an infinite automatic scroll... it's an unending loop.

 

There are a finite number of cards, it's just duplicated twice and one is moved ahead of the other, then repositioned under to make an upward moving loop. 

 

There is a container with an overflow of hidden holding all cards, I only care about the middle point of this container, in the demo, i just added a text to show what the middle point is. I am trying to do something (expand) with any card that's in that middle range at any given time.

 

Thank you.

Link to comment
Share on other sites

5 hours ago, ZachSaucier said:

In order to help you with the actual implementation we need more information. How are the cards being moved? Using a tween like you are doing in the demo? Or by the regular scrolling of the page? I understand that there are an infinite number of cards but that doesn't explain the mechanism of movement. If it's moving using a tween/timeline, how are you creating that animation? Will the page be scrollable like your demo is? If so, do you expect the middle element regardless of the scroll position to be the one that's active or the one in the middle if the scroll position is 0?

 

Lots of unknowns at this point. 

Hey Zach,

I made some updates to narrow down the unknowns and responded to all questions in my previous quoted reply.

 

Thank you, I would really appreciate some help :) 

Link to comment
Share on other sites

4 minutes ago, mvaneijgen said:

@Jordan Castiel I've tried something, but I can't get it to start from the third one and than move at a constant rate with the list speed, but maybe it helps you 

 

 

 

This is definitely an improvement, thank you! 

 

Just had a look and it's progress in the right direction, it solves the problem of keeping the active card enlarged and synced with the duration of the timeline, I also tried to target the middle element but I wasn't successful.

Link to comment
Share on other sites

You're using a really old version of GSAP. We highly recommend that you use GSAP 3 because it has a smaller file size, a sleeker API, and a bunch of new features.

 

As for your question, since you're using a set animation to move the elements then you can use a set animation to highlight which one you want to be highlighted. Just create a staggered animation that applies the effect that you want to apply on the timeline that repeats.

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...