glenn_pot

Hey all, I'm using this slider on a few pages for this site (bahama bucks dot com) and would like to add optional arrows also. On click, I can update the position of the slides, but I'm having trouble tying in the animation to the correct slide position and everything falls apart when I try. Can someone guide me in the right direction for this step? Thanks, and thanks again for everything from this product and forum!

Hey everyone, thanks again for this community. I'm hoping to start a WP project very soon that includes a home page that's larger than the viewport. The wish is that a user can click and drag around the canvas (not HTML canvas) freely. This home page is a great example - https://aletagency.com/ (select 'random' at the bottom). I don't have a codepen to share at this time but really was just wondering if this is even possible with GSAP. Thanks for any insight!

Thanks for the tip @OSUblake, here's where I've landed with it this morning. Getting closer! The z-axis manipulation proved more manageable in a separate timeline but I'm not sure if that's the most efficient method. https://codepen.io/glenn_pot/full/poPNWQq

I'd like to have a few (4-5) clickable items floating in space, aligned with a shared svg path, positioned at different intervals along the path and they all move simultaneously 'towards the user' on scroll. I'm able to achieve this using with MotionPath/Scrolltrigger and playing with the z-axis but I could use some direction with aligning the second element to be 'further along' the path, but move at the same speed when the user scrolls. The items should maintain the 'distance' illusion between them as you scroll.

Thanks @ZachSaucier! https://codepen.io/glenn_pot/pen/ZELyPvN

Hi @ZachSaucier, I added to this a little to allow for a smooth transition between words if the rotator is embedded in a sentence, which I think works well. https://codepen.io/glenn_pot/pen/ZELyPvN How would I slow the whole thing down?

@ZachSaucier Well specifically, how to kill both animation and draggable instances on window resize and recalculate. My method above fails to kill the current instances exists on resize, and I understand how that's the wrong way to go and is the reason for the breakdown. Your method doesn't use the kill() method, which I noticed elsewhere, so I'm just looking for the most efficient way to do this.

@ZachSaucier Man, I have tried in vain to learn from that demo and take what I need for mine but it's just not working. Any additional direction would be much appreciated.

@ZachSaucier! I never thanked you for this ? Now I've run into a new issue. The carousel works great on load, the onRelease function works great. But when the window is resized or just scrolled on mobile, the carousel breaks down if you swipe it again. I think it's the window resize function that's causing this but I need the values to be recalculated on resize. Ideally, I'd like to have 3 showing at <768px and 5 showing on anything larger. Is there a better way than this to recalculate these values smoothly on window resize and could this include a cellWidth window% update at a certain browser width? https://codepen.io/glenn_pot/pen/JjbrXpE

Thanks @ZachSaucier. I get that I can use onThrowComplete and onDragEnd callbacks to know when the whole slider has moved but I'm unclear as to how to actually identify the active slide, so I can grab it's data-attribute or whatever. From there, I know how to use that to switch out content below. This is where the updates happen to the active slide .to(element, cellStep, { scale: 1, repeat: 1, yoyo: true }, 0.5 - cellStep); but where would the function to grab attributes from it go? or something equivalent to toggleClass() ?

I modified this slider a while ago to include a (somewhat) arch effect and now I want to expand it to display content below the slider which changes dependent on the 'active' slider at the top. I could do this with some simple fadeIn/hide direction based on matching data attributes but since className is out with GSAP3, I'm not sure how to throw this function into the mix.

Thank you so much @PointC, huge help today. I've worked this into my project now and everything is working in tandem now

@PointC I'm still not seeing a working carousel after these updates though. The error is gone now, but the slider build is still not working properly.

Thanks @PointC, but I noticed that your demo with updated Draggable is still not working as it was here: https://codepen.io/glenn_pot/pen/NWRoJjp

Thanks for the super quick reply @ZachSaucier. This is the TweenMax, Draggable, ThrowProps portion of my code, which works but I guess now needs to be updated. https://codepen.io/glenn_pot/pen/NWRoJjp I read the guide you shared and swapped out TweenLite and TweenMax instances and I'm getting "Uncaught ReferenceError: Draggable is not defined" https://codepen.io/glenn_pot/pen/VwKRpYe