darkgr33n

Thank you Rodrigo All the best

Thanks for your help Rodrigo, I was a little lost as to how best to tackle this, but your reply certainly helped me look at it in a different way I needed the background transparency animation from my original pen though, and after a bit of messing about, it became obvious that I really needed to separate the change in height from the background transparency so I could involve some kind of scrub on the height change, otherwise it felt a bit jerky. I think i've achieved this now but i'm not sure how well its constructed, but it seems to work at least! https://codepen.io/darkgr33n/pen/XWyjXOq

Hey, Using Greensock's codepen as the basis, I've got a menu bar that move's offscreen on scroll down and back into view on scroll up. Using another ScrollTrigger, it also changes the menu background so that its transparent on the first section and opaque in the subsequent sections. The final piece of the puzzle, which is what i'm struggling with, is trying to ensure that, when top of the first section is at the top of the viewport (ie, we're at the top!), the menu bar should be an additional, say, 100px from the top of the screen. I can add a y:100 into the second tl timeline, but it obviously interferes with the the first timeline trying to scroll the menu out of view. Should I add a third scrollTrigger to watch for that ? I've already got two scrolltriggers on one element and i think i'm going down a bit of a rabbit hole!

Thanks Jack! I could see why it was conflicting, but didn't even consider using a different property which, of course, works beautifully. Thanks again

Hi, I have three columns that use stagger to animate into position using ScrollTrigger.batch. This is set to Once only. I'd like to add a data-lag attribute to the columns, but if I add it in the code, it competes with the stagger animation resulting in a bit of a twitch. The question is, once the animation is completed, is there a way to add the data-lag attribute to the columns so that we can then use the goodness of SmoothScroller but not have it affect the animation ? Thanks!

I couldn't get it to work so decided to go down the flickity route which worked instantly.

i also noticed when using dev-tools on chrome and properties tab, that on the HTML version clientWidth, offsetWidth and scrollWidth are being shown as 7000px (which is the full width of the content), but on the WordPress version, while scrollWidth is shown as 7000px, both clientWidth and offsetWidth are shown as the width of the visible content. as far as I understand it: offsetWidth: The size of the visual box incuding all borders. clientWidth: The visual portion of the box content, not including borders or scroll bars , but includes padding . scrollWidth: The size of all of the box's content, including the parts that are currently hidden outside the scrolling area. which seems to suggest that the non-working WordPress version is showing correctly, whereas the working HTMl version is not as offsetWidth is showing as the full content including hidden elements. so I think the question is, by initiating the Draggable.create is there any way to force the offsetWidth ? I've tried to set it using JS, but I can only set it up to a maximum of the rendered size. So, for example, if it's rendered as 1116px, i can use JS to set it to anything up to 1116px, but not beyond. if I set bounds: {left: -innerWidth*3} instead of bounds:".carousel", it lets me drag OK, but of course I can't see the whole carousel as innerWidth is actually the width of the rendered UL, not the width of the full content. Not sure if i should be using getBoundingClientRect somewhere. so frustrating that it works on codepen and HTML!

something else I've just noticed, but on the non-working WordPress version, the UL is given the style: "translate: none; rotate: none; scale: none; touch-action: pan-y; cursor: grab; user-select: none; " whereas on the working HTML version with the same JS/CSS/HTML setup, the UL is given the style: "touch-action: pan-y; cursor: grab; user-select: none;" o.O

Thanks for your reply Rodrigo I have tried to use div's rather than ul/li but to no avail. I just tried rebuilding on another local setup - a site without WordPress, just good old HTML/PHP - and it works exactly as the codepen version does, so I think you're right: something within WordPress is affecting the calculated width of the UL - or div. I just need to track it down. Or at a push, work out a way within GSAP to get the width of the UL from the LIs and set it, but that feels like a hack. Back to the investigations. Thanks.

Hey all, I've run into an issue when porting the code in the attached codepen into my local environment, and i just hoped that someone may recognise the symptoms and have an idea of a fix. The codepen (seems) to work fine, however when I use in my local environment (WordPress) I'm unable to drag the carousel. After some hours of investigation with dev tools, it turns out that, in my local environment, the UL is not calculating the full width of all the LIs and is reporting it at just 1485px (the width of the element in the browser); whereas codepen, is reporting the width of the UL correctly as 7000px. Hence, no drag. If I manually add a specific width to each LI, it does then calculate the width correctly, but there are a lot of pages with different image sizes so doing it manually isn't really possible. From what I've read, the calculated ul width is not based on the content of the li and you have to specify the width of the li elements, but if that is the case I don't understand how codepen is working it out. I just wondered if anyone knows if codepen is doing something behind the scenes that i'm not aware of, or if anyone has experienced anything similar in their coding travels and managed to overcome it somehow ? EDIT: one other point, if i remove the bounding locally, then I can drag the carousel OK, but of course everything disappears as there are no bounds! The UL is still reporting as the width of the browser rather than full width of the content, but I can drag. With bounding, I can't drag at all. EDIT: one final difference I noted, on codepen, I can see the LI elements get a style of "touch-action: pan-y;" added, however locally, no style is added at all. I'm not sure if this has any affect on anything o.O Thanks!

Hey Jack, Thanks for highlighting that point, I had totally missed that there was a static method I could utilise as well. I just gave it a go and it seems to work and has saved about 20 lines of code! I might be able to optimise it a little more, but for now I'm pretty happy. https://codepen.io/darkgr33n/pen/MWbVooR Next step is to make draggable only available on mobile but I should be able to use matchMedia for that. Cheers!

Just had a quick look at getting this working, but I think what I struggled with when I first saw hitTest was that the target element - the actual element being dragged - is actually a wrapper, and I can't see a way I can use hitTest as the child elements I need to effect are within the draggable target. https://codepen.io/darkgr33n/pen/rNWdxjW

Thanks Zach that's helpful. For the mid-point, I'm assuming I'd have a div that's not visible, absolutely positioned in the center to act as the testObject. I assume I'm ok having three hitTests on one draggable instance, like I've done in my demo: one for onDrag - which adds a class; one for onDragEnd - which animates the element; and one for onDragStart - which clears everything ready for the next one.) ? Cheers!

Thanks Zach, The end goal is for it to work as it does now, just a little more efficiently When dragging it needs to just add a class to each of the child elements as it passes the center point. If you end the drag while an element is on the center point, it needs to run an animation that widens the element. It will do other things, but I wanted to reduce the code to just the functionality i was struggling with. There will be text popping up and a video playing, but i just needed to nail being able to initiate some kind of action when dragging the child elements over the center of the screen. I'll give the hitTest a go and report back. Cheers!

Thanks Zach. To be honest, I did see it but wasn't sure if it was entirely relevant in my case. Because I was targetting the child elements of the element I'm dragging I didn't think it would work and so I reverted to getting it working any way I could! So in theory then, I could use hitTest to effect the same behaviour. Interesting. I'll try and explore it and see if I can get it working in my case later today. Thanks