horizontal scrolling on 3d carousel gallery

[kocoug]

I am trying to make this 3d carousel gallery to horizontally scroll using Scrolltrigger(gsap), but I kept failed. 

Can anybody help me please? I tired tons of ways, but all failed 

What I am trying to make:

If I scroll down or up, the 3d carousel gallery also rotates following scrolling.

See the Pen GRPJmvo by kocoug (@kocoug) on CodePen

[mvaneijgen]

Hi @kocoug welcome to the forum!

 

Can you share the way's you've tried to get it working, that way we can see your thought process and thus better help you! None working demo's are really helpful, maybe you made a tiny mistake that can be fix in a minute, right now there is no JS and if anyone wants to jump in they have to first setup everything before we can even start debugging. If you have several approaches, just share two or three versions.

 

 

 

[kocoug]

5 minutes ago, mvaneijgen said:

Hi @kocoug welcome to the forum!

 

Can you share the way's you've tried to get it working, that way we can see your thought process and thus better help you! None working demo's are really helpful, maybe you made a tiny mistake that can be fix in a minute, right now there is no JS and if anyone wants to jump in they have to first setup everything before we can even start debugging. If you have several approaches, just share two or three versions.

 

 

 

var counter = 0;
$(document).bind("mousewheel", function(event){
    if(event.originalEvent.wheelDelta > 0){
        counter += 10
        console.log(counter)
        $(".gallery_box_outer").css({"transform":"perspective(1000px) rotateX(-8deg) rotateY("+counter+"deg)"})
    }
    else{
        counter -= 10
        console.log(counter)
        $(".gallery_box_outer").css({"transform":"perspective(1000px) rotateX(-8deg) rotateY("+counter+"deg)"})

    }
})
 

This is only one that made it to move horizontally, but I want to make it with ScrollTrigger :C 

I have put it on codepen, but I don't know why it is not working. 

[mvaneijgen]

Ah, I see, thanks! That clears things up! First off, check out these awesome starter guides. I think these are a must read when you're starting out. 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

Here is my version. I've move the tilt (rotateX: 8deg) to the .gallery_box and removed most of the transforms from .gallery_box_outer. 

 

Then in the JS I've created a timeline with just one tween on it, that rotates .gallery_box_outer 360deg over 10 seconds with an ease of none, so that the animation is linear the whole way round. 

 

See the Pen KKbpmbR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

See there is no ScrollTrigger in the demo above. That is because, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

So here is a version with ScrollTrigger, I've used some tips from the following video, so be sure to check that one out 

 

 

See the Pen ExGjmMz?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Hope it helps and happy tweening! 

[kocoug]

a 

[kocoug]

15 hours ago, mvaneijgen said:

Ah, I see, thanks! That clears things up! First off, check out these awesome starter guides. I think these are a must read when you're starting out. 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

Here is my version. I've move the tilt (rotateX: 8deg) to the .gallery_box and removed most of the transforms from .gallery_box_outer. 

 

Then in the JS I've created a timeline with just one tween on it, that rotates .gallery_box_outer 360deg over 10 seconds with an ease of none, so that the animation is linear the whole way round. 

 

 

 

 

See there is no ScrollTrigger in the demo above. That is because, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

So here is a version with ScrollTrigger, I've used some tips from the following video, so be sure to check that one out 

 

 

 

 

 

 

Hope it helps and happy tweening! 

Thank you so much!! 

I am trying to make it like https://cydstumpel.nl/ this page, do you have any suggestion?

You are genius

[mvaneijgen]

The Netherlands represent 🧀 (I'm Dutch)

 

Yeah, I would move the rotateX: 8deg back to the .gallery_box_outer and then also animate that in tandem with the rotateY, the exacted angle you've to figure out. Something like this 

 

See the Pen eYbNXga?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[kocoug]

1 hour ago, mvaneijgen said:

The Netherlands represent 🧀 (I'm Dutch)

 

Yeah, I would move the rotateX: 8deg back to the .gallery_box_outer and then also animate that in tandem with the rotateY, the exacted angle you've to figure out. Something like this 

 

 

 

Ohhh that is sooo cool!!!

How can I make it to pop up the text when I hover the box like the site?

I stucked on there

[mvaneijgen]

Multiple ways. You could have text for each box already set in place at that position but visually hidden. Or you could make a text box and swap out its content with the new text. I think the first option is easier. And then just check which card is being hovered and do the logic. You will need the following javascript methods.

 

yourElment.addEventListener("mouseenter", (event) => {... do something});
yourElment.addEventListener("mouseleave", (event) => {... reverse what you did });

 

We love helping here, but the best way to learn is to get your hands dirty! If you stuck just post back here with a minimal demo of what you've tried. 

 

My advise would be try something out, personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

If you're looking for inspiration, again check the starter guides, there is so much useful info in there! Or/and check out the following YouTube channels

 

https://www.youtube.com/c/GreenSockLearning/videos

https://www.youtube.com/user/snorklTV/videos  our own @Carl !

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

[kocoug]

21 hours ago, mvaneijgen said:

Multiple ways. You could have text for each box already set in place at that position but visually hidden. Or you could make a text box and swap out its content with the new text. I think the first option is easier. And then just check which card is being hovered and do the logic. You will need the following javascript methods.

 

yourElment.addEventListener("mouseenter", (event) => {... do something});
yourElment.addEventListener("mouseleave", (event) => {... reverse what you did });

 

We love helping here, but the best way to learn is to get your hands dirty! If you stuck just post back here with a minimal demo of what you've tried. 

 

My advise would be try something out, personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

If you're looking for inspiration, again check the starter guides, there is so much useful info in there! Or/and check out the following YouTube channels

 

https://www.youtube.com/c/GreenSockLearning/videos

https://www.youtube.com/user/snorklTV/videos  our own @Carl !

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

I made the hover effect like this! 

(if I copy my code on codepen, it dosent work well so I attached the file) 

Now I am stucked on making animation layer infinitely rotating around the gallery like the site https://cydstumpel.nl/ 

I think its gonna work by using @keyframe code but it dosent... or using .js?

do you have any suggestion? 

gallery pracitce.zip

[mvaneijgen]

Nice job! Seems to work fine for me, we really want codepen demo's (or Stackblitz if you're using a framework), because then we can jump directly in to the code. 

 

See the Pen BavoWGX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

So your question is now that you want to have it scroll infinitely? There is no content going to be at the to or bottom of the page? I know Lenis has an infinite feature, but I personally never used it and it isn't a Greensock tool, so we can really provide support on this forum

 

ScrollTrigger isn't really build for infinitely scrolling, it uses the normal scroll of the browser and that one isn't infinite. You could make it so that onLeave of the ScrollTrigger you jump back to the start, but I don't know how that would look, and could feel jarring. 

 

If I would build it I think I would use the Observer plugin (https://greensock.com/docs/v3/Plugins/Observer), this watches for a scroll event and then does something, that way you're not really scrolling and can just use a looping animation. 

 

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

 

Or are you talking about the ribbon on top?

[kocoug]

38 minutes ago, mvaneijgen said:

Nice job! Seems to work fine for me, we really want codepen demo's (or Stackblitz if you're using a framework), because then we can jump directly in to the code. 

 

 

 

 

So your question is now that you want to have it scroll infinitely? There is no content going to be at the to or bottom of the page? I know Lenis has an infinite feature, but I personally never used it and it isn't a Greensock tool, so we can really provide support on this forum

 

ScrollTrigger isn't really build for infinitely scrolling, it uses the normal scroll of the browser and that one isn't infinite. You could make it so that onLeave of the ScrollTrigger you jump back to the start, but I don't know how that would look, and could feel jarring. 

 

If I would build it I think I would use the Observer plugin (https://greensock.com/docs/v3/Plugins/Observer), this watches for a scroll event and then does something, that way you're not really scrolling and can just use a looping animation. 

 

 

 

 

Or are you talking about the ribbon on top?

I was talking about the ribbon on the top.

[mvaneijgen]

It looks like they have build it in a canvas element in a tool called three.js, this is a library to work with 3D objects, that's above my pay grade 🙃 

 

What I would do is have an element on top and just don't have it wrap around (or have two shapes one for the back and one for the front), with text that is just looping around. You could use the MotionPath plugin (https://greensock.com/docs/v3/Plugins/MotionPathPlugin) to have your text follow a curvy shape.

 

[kocoug]

7 minutes ago, mvaneijgen said:

It looks like they have build it in a canvas element in a tool called three.js, this is a library to work with 3D objects, that's above my pay grade 🙃 

 

What I would do is have an element on top and just don't have it wrap around (or have two shapes one for the back and one for the front), with text that is just looping around. You could use the MotionPath plugin (https://greensock.com/docs/v3/Plugins/MotionPathPlugin) to have your text follow a curvy shape.

 

I also realized it was using three.js when I opened developer tool :C
What dose "have an element on top and just don't have it wrap around (or have two shapes one for the back and one for the front), with text that is just looping around" mean? I kind of can't get it clearly

 

[mvaneijgen]

Just an element on top of it all that has some text in it. 

 

See the Pen PoXPmMW?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[summersammy]

On 8/25/2023 at 10:07 AM, mvaneijgen said:

It looks like they have build it in a canvas element in a tool called three.js, this is a library to work with 3D objects, that's above my pay grade 🙃 

 

What I would do is have an element on top and just don't have it wrap around (or have two shapes one for the back and one for the front), with text that is just looping around. You could use the MotionPath plugin (https://greensock.com/docs/v3/Plugins/MotionPathPlugin) to have your text follow a curvy shape.

 

you can create for this type of curving text and crousal gallery full source code provide please

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.