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.

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

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 ?

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?

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

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.

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.

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

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.

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

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

hi @akapowl thanks for fast response. Yes that's what I'm looking for as I have found that animation trigger after scroll ends. I will look in these examples today. Thanks again Have a great day

Hi everyone this is my first post here on this forum. I would like to ask for some help as I'm GSAP newbie. I'm playing with sections overlap to move in reverse order and all is working as I expected BUT there is a delay on my animation and I can't find from where is coming from be able reduce _(remove)_ it to make overlap smooth. Here is simple example with use JS but as GSAP newbie but I can't recreate it in GSAP. _(ignore buttons as I just create them to run animation. In GSAP it trigger on scroll)_ https://codepen.io/stan65/pen/zYPvVzq Anyone can point me a right direction to make it smooth and check if Im doing it right some way? Thanks Stan