stop infinite scroll

[FineDiv]

HI everyone

can anyone help me stop an infinite scroll behaviour? All I need is to make these elements just move back end forth. I have tried several things but more I'm thinking and trying I get more lost. Thing is that slide elements are stack on top of each other in absolute position and container and slide are moved opposite direction out of view at initial stage.

 

To make them move I monitor "wheel" there will be more animation going on an images but All I need is stop infinite loop. As I have mentioned I have tried several as basic "when next undefined - return" , working with next count several ways, trying to set initial state etc. etc.  

 

Can anyone help me to solve this issue as it is not simple standard slider?

Thank you in advance

 

Stan 

See the Pen WNXrdyx by stan65 (@stan65) on CodePen

[FineDiv]

Just adding one note that is highly possible that I have overcomplicated whole concept or set it a wrong way. ;(

 

Im will keep woking on it on my comp. Any comments are welcome.

 

Thanks

 

Stan

 

 

[OSUblake]

What was this originally?

 

function handleDirection() {
	listening = false;

	if (direction === "down") {
		next = current + 1;
		if (next >= slides.length) next = 0;
		// if (next >= slides.length) return;
		slideIn();
	}

	if (direction === "up") {
		next = current - 1;
		if (next < 0) next = slides.length - 1;
		slideOut();
	}
	// if (next < slides.length - 1) {
	// 	return;
	// }
}

 

If something is at the end or beginning, you would need to prevent setting the next value and calling the corresponding slideIn/Out function.

 

[FineDiv]

hi @OSUblake thank you for response the commented out are last thing things I have tried and didn't work for me. I understand that this is part where is my problem but standard JS doesn't work for me in GSAP and as GSAP novice I do not know if GSAP offer some custom function. I have saw in few code examples set timeline to "null" on "onComplete" or what ever other custom properties. But like I have mentioned I'm not familiar with GSAP syntax still trying to find my way to understand and it is hard for me to choose right function and/or property.

 

I have tried done this with scrollTrigger but there is a delay (already explained on this forum) but I cant use this solution because of delay (waiting scrollbar to move). Im trying already 2 days to make it work and Im mentally tired and I mean tired. I have no problem working with front-end or back-end but it looks that working with animation and GSAP is beyond my mindset.  

 

Here what Im going after (main animation of changing slides) https://dpotferstudio.com/

 

I have started from scratch again without using current, next and I see what I will come up with.   

[GreenSock]

It looks to me like you were copying work from this CodePen, right?: 

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

 

And you're asking how to just stop it after it reaches the last one instead of "looping" back to the start? 

[OSUblake]

Well, that's probably not the easiest example to learn GSAP from. It's just a nice demo we saw on CodePen. I can fix the loop for you later tonight and try to explain what's going on. 

 

If I was going to start from scratch, I would start simple, like with a "Previous" and "Next" button just to get a understanding of how to control the animation. Once I was satisfied, then I would add in all the more complicated stuff, like the touch and wheel controls.

 

[GreenSock]

Here's a quick fork that adds two lines of conditional logic that'll skip the next/previous jumps when you're at the end/start: 

See the Pen JjOOYNo?editors=0010 by GreenSock (@GreenSock) on CodePen

[FineDiv]

26 minutes ago, GreenSock said:

It looks to me like you were copying work from this CodePen, right?: 

Hi @Greensock  Yes that's correct I have copy code to start with something.

[FineDiv]

12 minutes ago, GreenSock said:

Here's a quick fork that adds two lines of conditional logic that'll skip the next/previous jumps when you're at the end/start: 

 

 

Hi @GreenSock you have made my day. Now I see where was my mistake. forgetting "-1" and I was relaying mainly on "undefined". So simple and elegant. I should be ashamed not to see this mistake. Second pair experienced ayes is always beneficial and lesson learned. Thank you again.

[FineDiv]

25 minutes ago, OSUblake said:

Well, that's probably not the easiest example to learn GSAP from. It's just a nice demo we saw on CodePen. I can fix the loop for you later tonight and try to explain what's going on. 

Hi @OSUblake thank you for getting back to me. @GreenSock already fix my bad coding so this part is done. But If you will create demo from page I have posted this will be amazing. I will continue work on mine and once it will be done I will also keep it on Codepen. 

[OSUblake]

Well I won't have to time recreate that site, but the animation code in the original demo can definitely be simplified into a single gotoSection function. Does this make it easier to understand?

 

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

 

[FineDiv]

hi @OSUblake nice refactored example to study. It will take a time for me to digest and understand the logic. One thing I see is -fn- `clamp()` this function take different attributes (parameters) in different order that CSS `clamp()` a bit confusing on first look but after reading GSAP doc it is more clear and it is nice to see using it in this example.

 

Another nice example is `dFactor` It is elegant solution how to control elements direction move. It took me a while to figure out the values flow but finally got it.

 

The one thing I still can’t wrap my head around is part

 

{ yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor) }

 

from where you taking value for `i` to evaluate it and proceed by ternary to move elements.

 

Thank you in advance

 

Stan

[FineDiv]

Hi guys I have one noob question about GSAP Docs. I have tried to find informations what properties (keys) GSAP  object can hold but when I try to find info about eg. yPercent  result of search in Doc returns nothing, not in Cheatsheet either. When using  google the results are only links to GSAP Forum where words is mentioned.  

 

So my question is, Is there some list of all custom GSAP specific properties with description to be able know what I can use as GSAP using its own names?  It is a bit confusing as when I type eg. stagger result will return list of  articles where the word is mentioned, or autoAplha return link to CSSPlugin but why is not returning anything for keyword yPercent.  Is this only exception? When I see something in code example _(GSAP property of GSAP specific function)_ I would like to read about it but how to find anything related to GSAP in Docs. Do I use Docs wrong way?

[OSUblake]

4 hours ago, FineDiv said:

The one thing I still can’t wrap my head around is part

 

{ yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor) }

 

from where you taking value for `i` to evaluate it and proceed by ternary to move elements.

 

That's a function based value. It's described in the Tween docs if you scroll down to the Function-based values section. And there's also a QuickTip in the Learning section.

 

 

When you create an animation, the target(s) is put inside an array if you don't provide one, and then any function based value will be passed in the index of the target in that array, the target, and the array.

 

It's really helpful when you want to customize a different value for each target in an animation.

 

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

 

 

[OSUblake]

Not sure why yPercent isn't bring up any search results, but it's in the CSSPlugin docs. And unfortunately, I think the best description of xPercent/yPercent is an old blog post.

 

3 hours ago, FineDiv said:

So my question is, Is there some list of all custom GSAP specific properties with description to be able know what I can use as GSAP using its own names?

 

When animating HTML or SVG element, the properties use the same names as CSS. The only special ones are listed in the CSSPlugin docs, and are mostly related to transforms, so x, y, rotation, rotationX, rotationY, rotationZ, scale, scaleX, scaleY, skewX, skewY.  There's also autoAlpha which works like opacity, but automatically applies visibility: hidden to it when the opacity is 0. And SVG has a couple specific ones like svgOrigin and smoothOrigin, again, all in the CSSPlugin docs.

 

3 hours ago, FineDiv said:

Do I use Docs wrong way?

 

Not really. The docs just need to be improved, which is something we're working on. Please give us your honest opinions about what you think about the docs and what has been the hardest part about getting started with GSAP. Feedback is always welcomed, good or bad.

 

[OSUblake]

Forgot about staggers. That actually has it own section, which might not be obvious due to where it's listed.

 

 

 

https://greensock.com/docs/v3/Staggers

 

[FineDiv]

oh, ok. Probably I got it, correct me if I'm wrong

So according to Docs can be to this -fn- passed 3 parameters (index, target, targets).

 

As this -fn- is assigned to tl.formTo and you are passing only one parameter (rest gets ignored) the value for i is  passed form Array [outerWrappers[index],innerWrappers[index]]?

Does this mean that GSAP will find all elements  outerWrappers[index]  (one element returned) and use it for i?

Q: does it ignore rest of array [outerWrappers[index],innerWrappers[index]]and find all items only first value in array and use it for i? Only asking as there can be a case innerWrappers[index]can have different number of elements. Only theoretical Question.

I will definitely need spend some time on more examples.

 

BTW, I’m trying to clog returned values in timeline but have trouble to find how clog correctly in GSAP.  I have found some examples like onUpdate: -fn- but getting errors. I need spend some time on Docs to find how to clog and monitor values in timeline proper way. 

 

Thank you  😉

[FineDiv]

I see now that -fn- returning for i only 0 and 1 .  Slowly getting there. 

[OSUblake]

1 hour ago, FineDiv said:

As this -fn- is assigned to tl.formTo and you are passing only one parameter (rest gets ignored) the value for i is  passed form Array [outerWrappers[index],innerWrappers[index]]?

 

I like to think about what's happening with the function based values is to think in terms of an Array.forEach. 

 

So GSAP is basically doing a forEach each call on every function based value.

 

// this is basically the same...
[outerWrappers[index], innerWrappers[index]].forEach((el, i) => {
  tl.fromTo(
    el,
    { yPercent: (i ? -100 * dFactor : 100 * dFactor) },
    { yPercent: 0 },
    0
  )
})

//  ...as doing this
tl.fromTo(
    [outerWrappers[index], innerWrappers[index]],
    { yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor) },
    { yPercent: 0 },
    0
  )

 

And it might help if you log out the stuff just so you can see what's going on. And yes, all the additional parameters are optional, and you can name them whatever you want.

 

console.log("targets", [outerWrappers[index], innerWrappers[index]])

tl.fromTo(
  [outerWrappers[index], innerWrappers[index]],
  { yPercent: (i, element, elements) => {
    console.log("\nindex", i)
    console.log("element", element)
    console.log("elements", elements)
   return (i ? -100 * dFactor : 100 * dFactor); 
  }},
  { yPercent: 0 },
  0
);

 

1 hour ago, FineDiv said:

I have found some examples like onUpdate: -fn- but getting errors. I need spend some time on Docs to find how to clog and monitor values in timeline proper way. 

 

What kind of values are you trying to log out?

 

[FineDiv]

Hi @OSUblake thank you for response with examples. As I'm familiar with JS forEach method things are getting more sense now. I have finally found how to clog data I need.   Again bad coding, not thinking upfront. 🤫 All good now.