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!

Oh and here is my staging site where I've updated the project to use GSAP 3.11.4 and you can see the little subtitle no longer animates like it does on production site. Production (3.10.4) works: https://ng-conf.org/ Staging (3.11.4) doesn't: https://ngstaging.ng-conf.org/

Went back to my code and doublechecked and the animation in my project definitely works when GSAP 3.10.4 is loaded, but stops working after I update my CDN link and GSAP 3.11.4 is loaded. I confirmed this Chrome dev tools. I don't get it! Clearly it's something on my end though if it works in codepen. Well, here's my code in case someone can spot something weird that I'm not seeing. Here's the site https://ng-conf.org/. /** * Animate the home title when page loads. */ export const homeTitle = () => { const title = document.querySelector( '.home .title' ); // Bail if there's no home title if ( ! title ) { return; } const tl = gsap.timeline(); // Wait for page to load before starting animation window.addEventListener( 'load', function() { tl // Title is hidden with CSS to prevent FOUC, so make it visible before animation starts .from( title, { autoAlpha: 0, duration: 0, } ) // Animtate the title from invisible to full size .from( title, { duration: 0.8, ease: 'power4.in', scale: 0, } ) // Animate the "10th Edition" subtitle, which is a pseudo-element and uses a css custom property "--beforeScale" .from( title, { '--beforeScale': 0.8, duration: 1.2, ease: 'elastic.out(1, 0.3)', } ); } ); }; Definitely no obligation to help me further since this seems to be on me. Thanks for all your time on here helping people!

@GreenSock I forked your pen and modified it to use css variable. It does work in my pen. It does work in my pen. Hmm well I'm stupefied now. I swear it stopped working after I changed this line in my code: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js to this https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js And then started working again after I changed it back. Thanks for your help! I'll try to figure out what's going on. Now If feel guilty for hijacking this thread with false info. Feel free to delete these messages. ?

@GSAP Helper and @GreenSock thanks so much for quick reply! Sorry for confusion, I'm animating CSS variables. I'll set up a codepen demo and follow up shortly.

Thanks for this solution @OSUblake, it was just what I needed to achieve my animation with pseudo-element. Experiencing a slight a hang-up though: When I upgraded from GSAP 3.10.4 to 3.11.4, my pseudo-element no longer animates (using this technique). Is it me, or is this no longer possible in GSAP 3.11.4? RESOLVED: This IS still possible in GSAP 3.11.4

Thank you for your quick help!

Hi, I'm baffled by my simple animation not working. I'm just trying to set up a similar animation to this one https://codepen.io/snorkltv/pen/ExVEOPa. I want items to fade in and slide up 70 pixels to display in the vertical center of the containing section. Instead, they're not sliding up at all. I don't understand why they're displaying at 70 pixels below the vertical center. Seems like the TO animation is working, but the FROM is not. Such a simple animation, what am I doing wrong? Thanks!

For future visitors also looking to create a seamless loop, here's another solution that @Carl (thanks Carl) explains in detail on https://www.snorkl.tv/greensock-staggers-with-seamless-loops/.

Thanks Jack, I really appreciate you creating this solution so quickly. Honestly, I was kind of hoping for a magic solution ? since I'm not a super strong javascript programmer, but I think I follow the logic in this solution. Now hopefully I can take this logic and apply it to my actual project, which has a few other moving parts. ? Thanks again, this really is the greatest of all support forums.

Hi, I have a set of squares which I want to display one square at a time, looping continuously. Each square fades in at the same time the previous square fades out. I'm able to achieve this by overlapping these tweens in the timeline except I don't know how to overlap final tween in the timeline with the first tween when the timeline repeats. Can someone please tell me how to configure my timeline so that the final tween overlaps the first tween in the timeline when the timeline repeats? I've seen some topics touching on this, but they were a little older and there were different solutions suggested. Is there perhaps a simple method or parameter I've overlooked that would accomplish this? Thanks!