clayteller

@GreenSock that is slick! You're right, thanks so much for coming up with that!

@GreenSock I really appreciate you taking time to tweak the helper function. I just can't get it to work with the animation effect I'm going for. I need the elements to be "overlapped" to achieve the effect (see attached screenshot) and I can't figure out how to use translate or negative margin with the enterAnimation and leaveAnimation functions. Tbh I really thought it would be possible to add prev/next controls to the code I was already using, which already has the animation just like I want. I was hoping I'd post on here and someone smarter than me would look at my original code pen and say yeah it's simple, you just need to use the seek() or tweenTo() method (or some such) to move the playhead to the previous or next element, and then I would be able to figure it out from there. I attempted to do that (in my code pen below) and almost have prev/next working like I want, but I think my approach must be flawed. Seems to work for a few clicks and then inevitably fails. Anyways, I appreciate the help. I'll keep at it—bound to get it eventually. Edit: Hmm my code pen isn't showing, but it's the same one in my original post. https://codepen.io/clayteller/pen/gOmBGEG

I do understand the code I've been using to perform this animation tl.from( rotatingItems, { y: 70, duration: transitionTime, opacity: 0, stagger: { each: staggerTime, repeat: -1, repeatDelay: repeatDelay, }, } ); tl.to( rotatingItems, { y: -70, duration: transitionTime, opacity: 0, stagger: { each: staggerTime, repeat: -1, repeatDelay: repeatDelay, }, }, staggerTime ); but I don't understand how I can customize the helper function code to do this kind of animation

I've tried but can't figure out how to change the animation of the helper function to fade elements in when they enter the viewable area and fade them out when they exit the viewable area. I found this part of the code but my attempts to add "opacity" tweens there aren't working. tl.to(item, {yPercent: snap((curY - distanceToLoop) / heights[i] * 100), duration: distanceToLoop / pixelsPerSecond}, 0) .fromTo(item, {opacity: 0, yPercent: snap((curY - distanceToLoop + totalHeight) / heights[i] * 100)}, {opacity: 1, yPercent: yPercents[i], duration: (curY - distanceToLoop + totalHeight - curY) / pixelsPerSecond, immediateRender: false}, distanceToLoop / pixelsPerSecond) The helper function offers config options but I don't understand how I can config the animation in the way I want using those.

@Toso thanks so much for creating that proof of concept! I will have a go at it and see if I can add the fade in / fade out effect I need. Will report back…

Thanks @Toso that's a good suggestion, but I'm not a great coder and I'm doubtful about my ability to customize that seamlessLoop helper function to animate the way my current code loop is, with the vertical fading in and out of elements. I guess in my mind seems easier to "add" prev/next functionality to my current code (since the animation actually works exaclty like I want) than restarting with a new set of code. I wish I was better at javascript and GSAP to know which is the smartest route to go.

Hi, I used @Carl's excellent code for creating a seamless loop to create a nice "testimonial slider" section on my websites. Now I'd like to update it with some prev/next controls so visitors can jump ahead or back through the testimonials. Maybe I didn't search hard enough, but i couldn't find an instance of the seamless loop code I'm using where someone has modified it to do this. I did find this related post GSAP Slider/Carousel, Next and Previous Buttons, but the approach there seems different enough from my current code that I'm reluctant to completely overhaul what I have. Before I do an overhaul, anyone know of a "simple" update to my current seamless loop code to add prev/next functionality? My code: https://codepen.io/clayteller/pen/gOmBGEG Thanks for your help!

@mvaneijgen that makes sense, thanks! You're right, but my script will run on a site that will have pages created by my client in the future. Performing a height check sounds like a great solution for my case. ? @Rodrigo thanks for the example!

@mvaneijgen I implemented your code update and it works great, thanks! The real application of this will sometimes have an aside section that is taller than the main central section. I set this up in my pen, and although it's minor, the aside section slightly extends below the bottom after scrolling (attached screenshot). Hmm, any idea how I can prevent this? If it's not an obvious fix, no worries, I'm sure I can fudge it somehow. Thanks! https://codepen.io/clayteller/pen/GRPEdBP

Thanks @mvaneijgen I really appreciate it! I even read about pinSpacing—don't know why I didn't connect the dots. GSAP community is the best.

Hello GSAP gurus, can you help me with what is surely a simple animation? I'm trying to pin my aside section during scroll: Start pinning when aside section hits the top of the viewport and stop pinning when the bottom of the aside section hits the bottom of the main section. It is close to working like I want, but I have a small issue: It appears that once the pin is triggered there is extra space created at the bottom of my main section. The extra space seems to be equal to the height of my aside section. Any idea what I'm doing wrong here? I just don't want that extra space to be there. Thanks so much!

@GreenSock awesome! I'll take the blame because I definitely don't normally use camelCase in CSS, I guess I must've been in the javascript frame of mind when I did that. Thanks so much for your help!

Thanks @Cassie I updated my previous codepen fork I posted with the code from my project. When the animation works, the pseudo-element will kind of pop into full size after the title animates to full size. You can see in the pen the pseudo-element is not animating. I appreciate your help. https://codepen.io/clayteller/pen/vYzXMwG

@GreenSock sorry, I spoke to soon about not using my brain: I'm using CSS variable instead of direct GSAP because I need to animate a pseudo-element. So, I tried suggestion of using transform: scale( var(--beforeScale) ); instead of scale: var(--beforeScale); but it still not working for me using GSAP 3.11.4. The update is here if you have time to take a peek: https://ngstaging.ng-conf.org/ Should I use CSSRulePlugin instead to help me animate pseudo-element? Would I need to be Club member to use that plugin?

@GreenSock thanks so much for that great explanation! I think I just wasn't using my brain is why I used a CSS variable instead of animating directly with GSAP. ChatGPT won't be replacing this forum anytime soon. ? Thanks!