jacobiwan

@ZachSaucier That makes a lot of sense the way you're doing it. Originally, I attempted to do something similar, but animating each frame all the way through before animating the next frame proved to be more difficult to me to line up properly than the way I've had it lately. But what you have here seems to work just fine, so thank you for that and for all your help. @Shrug ¯\_(ツ)_/¯ Before starting on this, I tried to search google, the forums and portfolios for something just like that! I found pretty much next to nothing and particularly someone saying that building an infinite scroll would be pretty complicated, so I just tossed the idea out. But yes, that's exactly what I'm looking to do, just vertically. I'll look into that more as part of a v2. Thanks a lot!

Hey Zach! Appreciate all your help on this! I made the changes that we talked about. I keep revisiting this part of the site if I've been struggling with it for too long to make sure I get other things done too. I figured out why the top 3 animations don't animate and it's actually causing more issues that I'm trying to understand. It happens when I use `gsap.set` to set the positions of the first 3 frames. After that I set the position of the remaining frames offscreen. However, if I set them all to start offscreen with just one `gsap.set` instead of 4, then the animation works flawlessly (aside from the starting state being incorrect). Looking at the docs for `gsap.set` I don't see anything that hints at why this would be a side effect of setting the initial positions this way. Here is the codepen. I've taken out a few frames for simplicity and removed any loops in favor of writing out each timeline manually to make sure that the animations were being set up correctly. Right now I'm toying with the css to see if it's the initial styling that's messing things up. Right now I have all frames styled to the center right of the screen, then they get set with gsap to off screen on the top right. https://codepen.io/jakeatunova/pen/ZEBQewN

Wow, I would've thought that top/left/right/bottom were performant to animate. Makes sense why not though. I also didn't know about that will-change property. Unfortunately, I don't know how many will be added, but that's not a large concern. I can work around that. I was getting some additional space at the end of the scroll that would push the frames up and off center. Adding `ScrollTrigger.refresh()` after the additional frames load in mostly fixes that issue. Also, thanks for your side notes ?. A few of those things were left over from the way I was doing things before when I was just focused on getting it to work and I hadn't realized or revisited them. I'm still working out some kinks, but one that I can't figure out is why the top 3 animations don't animate and simply jump. Looking through the docs and forums I don't see any similar issues.

That makes a lot of sense Zach! Since working with GSAP over the last month or two, I've started just creating all my animations in codepen first in case I need to share haha. I've updated what I had originally based off your help with the scroll triggers to this codepen https://codepen.io/jakeatunova/pen/ZEBQewN To me, this animation makes more sense. Instead of creating timelines for each frame to animate through all positions and staggering them, I've created timelines for shifts in the carousel where each frame shifts into the adjacent position. And I've done a bit of refactoring (took me a bit of time to figure out how to loop over this to keep things tidy, I'm sure I have some more refactoring I could do). So I'm left with a few questions: On mobile this is suuper stuttery. Scrolling on it feels like it has the screen shake animation attached, but not in a good way. Is that just an issue with mobile browsers or is there something in my implementation causing that? I was experiencing the same issue with the previous codepen. I'm curious about the CSSRulePlugin. One problem I think it will solve for me is that when I load the content channels on my site, a few frames load in immediately while others are added after a response from an ajax call. This makes me have to rebuild the timeline when I get the response back from that call because if I don't, the new frames will not be positioned properly. My poor (so far) understanding of CSSRule is that might solve that by using the css style sheets instead of the dom attributes, is that correct? Following up on that, I'm researching this now, but when I replace element with a CSSRulePlugin.getRule(`.media-frame-desktop:nth-child(n)`) and then attach it to an animation, I get an error saying that the element is undefined. I've registered the plugin and I've added the cssRule property to the animation properties object (`positions` in my code). Not quite sure what that would be and haven't been able to find anything so far. Thanks again for all your help! It's turning out just how I pictured it and I think I'm wrapping my head around scroll triggers and basic animations so far.

To finish what I was saying. The ideal situation is where a frame is always in each position. Meaning that on scroll, it snaps to the positions. Though this might mean that it would involve scrolljacking? Anyways, my work-around for now (which I'll provide a codepen for when I'm finished) is instead of animating each frame through the timeline and staggering them, I animate the entire stack of frames one position, then another, then another. I'm still working out what the best way to write that code looks like, but I think it will suit my needs a lot better than the initial way I thought it out.

Hey @ZachSaucier, I've been working on this here and there and I'm wondering, is it considered scrolljacking if instead of a smooth scroll like in this Codepen GSAP 3D Carousel Animation (codepen.io) It's a step scroll. As in, one scroll moves the position of each frame up/down one. This is with the idea being that there is always one frame perfectly centered.

That's a good point! I guess I just haven't come across that yet. I'll work on refactoring it properly. Thanks for all your help btw. I'm pretty close to finishing up. Just looking into snapping and running some code when a frame is centered! When I've finished up I'll put the updated codepen here.

Wow @ZachSaucier! Thanks so much for your help and feedback. I apologize, I didn't mean for you to do it all for me. This is almost exactly what I was looking for. The way I've created ScrollTriggers so far is using ScrollTrigger.create(). I only recently realized you could pass a scrollTrigger object to a timeline and hadn't quite understood it yet, but your example is pretty clear. I plan to read all the docs here pretty soon, which I am now, but slowly, and do some practice projects. That's good to know on the immediate child selectors! I think that this would be the first situation that it would mess me up in as I don't usually use many other libraries that change my html and since I'm just building simple websites for the most part, it's not difficult to change something when I need to. But I will keep it in mind going forward and try to avoid them. Thanks again!

Hey @ZachSaucier! I've created the animation. Wondering if you can guide me towards attaching it to a ScrollTrigger? Here is what I have so far: https://codepen.io/jakeatunova/pen/yLaWwmX It's simple. Ultimately I'd like to add a bit more to the animation, but that's about as minimal as it needs to be. I've created a few scrolltriggers, but just simple things like pinning something to the top as you pass it. One thing in particular I'm unsure about with this one is that the #content-channels div is going to be fixed position off the right side of the screen and on click of a button it slides in. When I've attempted to add a scroll trigger and show markers, it's as if it's attached to the body, instead of the .media-frames box. Also, any general info you have on just hooking timelines to scrolltriggers would be helpful. Going to do some research this weekend on that! Thanks!

Hey Zach! Thanks for that info. I didn't even realize this in the examples I sent, but honestly infinite scroll isn't even a concern to me. In my example, the carousel starts on the middle element and scrolls either way. If it hits either the first or the last element, it's okay if it stops scrolling and you have to scroll the other way. Infinite scroll is definitely something I want to look into now, but it's not necessary for now and I can look into it after I get an MVP going. For now, I think that draggable years example is the closest thing to what would work for me. It can be a simple effect and doesn't need to be a 3D carousel exactly. The minimal features I need from it are: Scroll through the elements One element always in focus Some nice features would be: Coming into focus is animated Infinite scroll 3D carousel With these guidelines, it could be a pure vertical scroll where it snaps to the element in the middle of the viewport (I'm sure that's been done before, have you seen it on the forum here? Didn't have any luck with my searches). And then I can expand on it from there. I'll look a bit deeper into the codepen above with the years. My current setup is a fixed vertically scrollable element that pops in from the right side when opened. I'm trying to figure out how to set the scrolltrigger relevant to the fixed element and not the body. Ultimately it will be to display different types of media, videos/clips, iframes.

I've spent the last couple weeks researching here and there about how to implement a 3d carousel, similar to the one you see on Twitch. Though the difference being that it would be vertical and it would activate on scroll, not on clicking the left/right (up/down) arrows. Similarish to this codepen that I found in the forums here, though not draggable. I added a codepen that I threw together really quickly of the outline I have so far. Tomorrow morning when I get some more time I will adjust it to be a bit more accurate. Anyways, my question is, has anyone seen something like that implemented that I could get ideas from? If so or not, do you believe it would be easy enough or should I rethink the design? Any feedback is appreciated!

Ha. I was just setting one up and struggling with adding gsap as an npm package. That video helped, thanks! I'll attach it anyways... but it seems to be working correctly in the new codepen. I just checked the staging site as well and it appears to be working (I haven't checked it in a while since it still wasn't working locally). I guess as long as it's working on the staging and there's nothing inherently wrong with my setup, I'll just go with it for now. Thanks for your help Zach!

Hey @ZachSaucier Thanks for checking it out! I tried updating the x value like you had it, unfortunately it didn't seem to actually do anything. Here is a link to a screen recording of how it works for me (it seems that it's not an issue on mobile Chrome, but it is an issue on mobile/desktop Edge/Firefox and desktop Chrome). You can see that it starts slow and doesn't quite finish the rotation. Then around the 20ish second mark, I update the function adding the line console.log(imagesBox.scrollWidth) and save it and you can see it refresh and go back to normal. I wish I had a better way to put the Vue component in there so I can replicate it exactly. Let me look into that.

Background I created a codepen so you can see how it's supposed to work. I've actually developed the site in Vue, so I've pasted the code from that component below. Put simply. I just want a list of logos to continuously flow from left to right. My implementation uses gsap to animate the sliding and then repeats the box of images so that it seems infinite. Problem When I start the vue server fresh or when I build it, the movement of the banner is about half speed. It never quite finishes the first box of logos and then restarts. I can't quite figure out why this is happening, but I imagine it's simple and I'm just overlooking it. The part that truly confuses is that if I put the line console.log(-imagesBox.scrollWidth) just above the gsap.timeline() and save it, it returns to full speed and working properly. Then I remove it and it continues to work fine until the next time I start up the server or build it. The only thing I've figured out is that initially on build or server start the value of -imagesBox.scrollWidth is -448, while the real value of it is -2240(values in the codepen may be a bit different) . Not sure why this is different on load vs after I make a change to the function and save. <template lang="pug"> section#sponsors.section-home .sponsors .images(v-for="n in 2") .image(v-for='s in sponsors' :key='s.id') g-image(:src="s.logoDark.file.url") </template> <script> import { gsap } from 'gsap' export default { name: "Sponsors", props: { sponsors: { type: Array, required: true } }, methods: { slideSponsors() { const imagesBox = document.querySelector('.sponsors') gsap.timeline() .to('.sponsors', { x: -imagesBox.scrollWidth / 2, duration: 10, ease: 'none' }) .repeat(-1) .then(this.repeatImages) }, async repeatImages() { const imagesBox1 = document.querySelector('.sponsors > .images:first-of-type') const sponsorsBox = document.querySelector('.sponsors') sponsorsBox.appendChild(imagesBox1) } }, mounted() { this.slideSponsors() } } </script> <style lang="stylus" scoped> #sponsors background linear-gradient(135deg, nl2, nl0) box-sizing border-box padding s0 0 height sp9 overflow-x hidden > .sponsors display flex flex-direction row width 100% height 100% > .images display flex flex-direction row justify-content center align-items center height 100% > .image box-sizing border-box margin-left sp4 max-width sp10 min-height sp2 > img max-width sp10 min-height sp2 </style>