Draggable image carousel horizontal scroll

[dogzzz]

Hi there,

 

I'm trying to make a draggable (horizontally) image sequence like the one on Polestar.com (see https://www.polestar.com/uk/ , second block down).

 

It's not a traditional slideshow because theres lots of images to scroll through between each slide.

 

The closest thing I can think of is a horizontal airpods scroll, but that's not quite it as it needs to be able to be dragged and it needs to scroll horizontally not vertically as you scroll.

 

I can see a transform translate(X) going on as you drag, as if all the images are laid out across the page?

 

Just wondering what the best way to go about this is/ what gsap tools will help to achieve the end goal?

 

Thank you so much 

See the Pen qBomggj by zrrrrr (@zrrrrr) on CodePen

[Cassie]

Hey there!

 

Maybe this helper function will help you?

https://greensock.com/docs/v3/HelperFunctions#loop

[GreenSock]

Here's a quick demo with ScrollTrigger and Observer: 

See the Pen zYWzvrZ?editors=0010 by GreenSock (@GreenSock) on CodePen

[dogzzz]

Thanks a lot for your help! 

[dogzzz]

Can I ask a Q - so it's great that you can drag it to the right and left in the above - how can I set 4 'snap' points for it to snap to along the way (ie one for each car)?

 

Thank you 

[Cassie]

Heya! You just need to add a snap value in the ScrollTrigger. Nice and simple!

snap: 0.25

from the ScrollTrigger docs.

snap

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

 

See the Pen zYWzvrZ?editors=0010 by GreenSock (@GreenSock) on CodePen

[dogzzz]

That's awesome, thank you!

 

I'm looking at doing the pop up description and progress bar that are linked to the progress of the timeline.

 

I've experimented with scrollTrigger's onUpdate => self => console.log(self.progress) and then saved self.progress in state and then used that to specify conditional logic to show/hide html but the results aren't great! (it's jumpy and causing a lot of re renders updating state each time the progress changes).

 

Is there a useful method / gsap property I can get hold of so I can respond to the progress of the animation to display the correct html at certain points during the animation?

 

Thank you so much  

[Cassie]

Quote

Is there a useful method / gsap property I can get hold of so I can respond to the progress of the animation to display the correct html at certain points during the animation?

Mmm. This just sounds like you need a timeline to me. They're literally for sequencing animations at certain points!

https://greensock.com/docs/v3/GSAP/Timeline

You can call functions at certain points on a timeline too - https://greensock.com/docs/v3/GSAP/Timeline/call()

 

And use the position parameter to position things at certain points
 

If you want to show or hide HTML elements...
 

// opacity and visibility hidden
tl.to(elem, {autoAlpha: 0})

// or just opacity

tl.to(elem, {opacity: 0})

// or display

tl.to(elem, {display: 'none'})

// or if you don't want animation

tl.set(elem, {display: 'none'})

 

[dogzzz]

Ok the only thing that is working is having a timeline animating the opacity of each one *

[dogzzz]

OK basically I'm trying to get the text to fade in and out as the timeline moves on, but for some reason it's waiting until the end to animate? 

 

The below means 'fade #one to zero opacity 20% in to the animation' , then immediately fade #two to opacity one, then 20% later fade #two to 0 and then immediately fade three to opacity 1, doesn't it?

 

tl.to('#one', {opacity: 0}, "+=20%");

tl.to('#two', {opacity: 1});

tl.to('#two', {opacity: 0}, "<=20%");

tl.to('#three', {opacity: 1});

 

See the Pen vYRZmgx by zrrrrr (@zrrrrr) on CodePen

 

Is there a way to get it to line up with the timing of the cars?  

 

Thank you!

 

PS: Since i posted this I've made some buttons that use window.scrollTo to move the scrollbar when you click to the 'slide' I want which kind of works. I can apply that to this. Just not sure that the 'gsap' way of doing it

[GreenSock]

You set up your timeline incorrectly, that's all. You put the entire playhead.frame animation at the start of the timeline, and then AFTER that whole thing was done, you put the rest of your opacity animations. But you want them to be overlapped. You get total control over where things get placed in the timeline with the position parameter. I'd highly recommend checking this out: 

 

 

 

Maybe this is more like what you wanted? 

See the Pen PoRjOqx?editors=0010 by GreenSock (@GreenSock) on CodePen

[dogzzz]

Fantastic many thanks for your help!

[dogzzz]

Ok so looking at https://www.polestar.com/uk/ I noticed that the animation is actually a drag animation not a scroll animation.

 

I am trying to get a nice draggable animation going, I have managed to draw upon the gsap example to scroll through images which is nearly what I want but I want the seamless scroll effect that you would get with scrollTrigger.

 

I made a codepen here: 

See the Pen JjvBMLR by zrrrrr (@zrrrrr) on CodePen

 

I want to be able to just use Draggable and not ScrollTrigger. I want to flick through the images. They don't have to be on a canvas but I have a feeling thats what makes the smooth image replacement effect work.

 

Please could someone help explain how to be able to flick through images with draggable?

 

Thank you !

[Rodrigo]

Hi,

 

What you can do is set up a Draggable instance in another element that could act as a proxy and update the progress of the images tween. Something like this, it uses V2 syntax but is quite simple and update it to V3 shouldn't be too complicated:

See the Pen npORQX by rhernando (@rhernando) on CodePen

 

Happy Tweening!

[dogzzz]

I've updated the codepen, now the drag event loops it straight through the whole sequence but I want to be able to stop throughout (as scrolltrigger would) but using drag instead, surely this must be possible?

 

Thanks

[Rodrigo]

Hi,

 

You shouldn't drag the canvas element itself, use another element as a proxy on top of it.

 

This example uses that approach, you can give a background color and opacity of less than 1 to the element on top of the canvas to see how it works, but is not that complicated:

See the Pen GRdBwQZ by GreenSock (@GreenSock) on CodePen

 

Let us know how it works.

 

Happy Tweening!

[dogzzz]

Great thank you

 

Is there a way to snap to each of the four cars if you drag closest to one of them?

 

Also can I use the same timeline to animate text over the top when you hit each car?

 

Thanks

[Rodrigo]

Hi,

 

I'm on my phone now so I can't dig too much into this. For snapping you'll need to know on which specific frame each car is centered on the image. Of course for the first and last is super easy, frame zero and the last frame. For the rest you have to check. The easiest way to add an onUpdate callback to the tween and log the current frame. Then just translate that frame number into something you can pass to the snap config on the Draggable instance.

 

Check Draggable's docs to see how snapping works.

 

Happy Tweening!

[dogzzz]

Ok I've managed to get the frame numbers (0, 95, 205, 298) but I need a way to be able to snap and skip to a certain frame which I can't seem to be able to get done. I've been on it all day. I need to be able to hook in to a master timeline as well as I need to do some text animations at the same time. Would you be able to explain how to be able to easily navigate and snap to fixed points along the showreel and how I can hook in at those points to set off text animations? Thank you so much 

[GSAP Helper]

Would you mind providing a minimal demo that only focuses on this one particular issue? There are various demos in previous posts, so you'll definitely increase your chances of getting a solid answer if you provide a CodePen with only the absolutely essential code/markup and clearly explain the desired behavior and what's not working as you'd expect. 👍

[Rodrigo]

Hi,

 

I updated the codepen example and created a snap function that works using onDragEnd callback. It uses the Snap utility method to get the value for the landing point, based on the frames you mentioned above and the range being passed to the Draggable instance.

 

See the Pen GRdBwQZ by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[dogzzz]

    pending

[dogzzz]

I'm trying to get the text to change when the user is at one of the four cars. 

 

I'm trying to hook in to the onComplete function to track _d.x  but the positions between the two extremes is different every time I drag. 

 

What I want is when you scroll to the second car you get the old text fade out and the new text fade in and the same for the next two cars, and when you drag back you get the inverse (which I think will be automatic if the tweens are set up right).

 

I've updated the codepen here with some text above and code in the onComplete function but I'm not sure if I'm going about this the right way 

 

See the Pen OJZrJbd by zrrrrr (@zrrrrr) on CodePen

 

Thanks so much for your help

 

 

[Rodrigo]

Hi,

 

The issue is that the snap function is based on the X position of the Draggable element and the frames for the pictures. To synchronize texts on that you'll have to create a new timeline and update it's progress in the onDrag event and then snap using the same function but with a different value.

 

I updated the codepen example:

See the Pen GRdBwQZ by GreenSock (@GreenSock) on CodePen

 

Let us know if you have other questions.

 

Happy Tweening!

[dogzzz]

Thanks a lot thats really helpful.

 

Just wondering why the images seem quite low quality. They are 1080 * 1080 jpgs on a 320 px screen. On the polestar site they look really high quality (https://www.polestar.com/uk/) and when I was trying this with another library they are coming out really nice but for some reason they are aren't very clear with this implementation, is there a reason?

 

I made a codepen here, there's a massive difference in image quality between the two? 

 

See the Pen JjvxMbv?editors=1111 by zrrrrr (@zrrrrr) on CodePen

 

 

Thank you