[How prev/next pagination can work with Draggable slider]

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!

See the Pen VwKRpYe by glenn_pot (@glenn_pot) on CodePen

[Draggable page larger than viewport - looking for ideas with GSAP]

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!

[Item follow another down MotionPath with Scrolltrigger]

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.

 

See the Pen poPNWQq by glenn_pot (@glenn_pot) on CodePen

[Item follow another down MotionPath with Scrolltrigger]

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.

See the Pen LYyRoOG by glenn_pot (@glenn_pot) on CodePen

[Text rotator]

Thanks @ZachSaucier!

See the Pen ZELyPvN by glenn_pot (@glenn_pot) on CodePen

[Text rotator]

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.

 

See the Pen ZELyPvN by glenn_pot (@glenn_pot) on CodePen

 

How would I slow the whole thing down?

[How to get 'active' slide from this draggable slider]

@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.

[How to get 'active' slide from this draggable slider]

@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.

[How to get 'active' slide from this draggable slider]

@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?

 

See the Pen JjbrXpE by glenn_pot (@glenn_pot) on CodePen

[How to get 'active' slide from this draggable slider]

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() ?

[How to get 'active' slide from this draggable slider]

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.

 

See the Pen VwKRpYe by glenn_pot (@glenn_pot) on CodePen

[GSAP and Draggable conflicts?]

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

[GSAP and Draggable conflicts?]

@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.

[GSAP and Draggable conflicts?]

Thanks @PointC, but I noticed that your demo with updated Draggable is still not working as it was here:

 

See the Pen NWRoJjp by glenn_pot (@glenn_pot) on CodePen

[GSAP and Draggable conflicts?]

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.

See the Pen NWRoJjp by glenn_pot (@glenn_pot) on CodePen

 

I read the guide you shared and swapped out TweenLite and TweenMax instances and I'm getting "Uncaught ReferenceError: Draggable is not defined"

See the Pen VwKRpYe by glenn_pot (@glenn_pot) on CodePen

[GSAP and Draggable conflicts?]

I'm running two completely separate functions and loading 4 libraries/plugins:

/gsap.min.js

/TweenMax.min.js

/Draggable.min.js

/ThrowPropsPlugin.min.js

 

function #1 is uses the gsap.timeline tool 

function #2 is uses TweenLite, Draggable and ThrowPropsPlugin.

 

#1 works great if I comment out the TweenMax, Draggable and ThrowProps scripts.

#2 works great if I comment out the gsap.min.js script.

 

Is there some obvious reason why they won't work together?

 

[Floating Animation]

Thanks @mikel! I think I got it using gsaps .toArray() method.

 

See the Pen wvzmYLv by glenn_pot (@glenn_pot) on CodePen

[Floating Animation]

Hi @ZachSaucier, @OSUblake. Could you point me in the right direction for applying this to multiple elements on the page, each moving independently of each other?