Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Githubish

Carousel 3D with Topology "star"

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

Hello everyone,

 

I'm new and I'm just starting to use GSAP. I have a project on which I have to do a 3D carousel with a reverse perspective (called "topology star" by some people). To be clearer here is a glimpse of what I am trying to do.

 

image.png.5bc044de8352ed724591612a08549bf9.png

 

Currently I modify an example on Codepen but I do not see how to apply a transformation like this. Can someone help me?

 

Thank you all

See the Pen MVGEBg by anon (@anon) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

I didn't see any animation in your demo.

 

I would suggest stepping away from the carousel aspect of it for a while and get just 1 image to animate in the fashion that you want. Any time you are relying on 3d with css and maintaining stacking order things can get screwy pretty fast. You might want to consider placing each image in a parent element. Rotate the parent using rotationY and then counter rotate the image so that it keeps the face of the image facing towards the user. 

 

FWIW I spent a good half hour or so monkeying around with it, but it didn't really work to my liking.

 

Someone around here may have something similar to show, but unfortunately our support has to stay focused on the GSAP API and not so much on building prototypes of advanced effects.

 

 

 

 

 

 

 

 

  • Like 3
Link to post
Share on other sites

The Good Sir @Jonathan is a wizard with carousels. Here's one that can probably lead you to a solution.

 

See the Pen RrVbzp by jonathan (@jonathan) on CodePen

Happy tweening.

:)

 

  • Like 3
Link to post
Share on other sites

I feel like the difficulty here is that the images don't form a "circle", they kinda rotate in the opposite direction. Maybe a way to do that would be to have inner divs that have a independent rotation with their transform origin unchanged. I'll fork one of Jonathan's pens.

  • Like 2
Link to post
Share on other sites

Hello @Githubish and welcome to the GreenSock forum!,

 

I know I'm jumping in late.. I didn't have time to mess with this right at this moment. But you can achieve this star shape vs the traditional circular shape of the carousel, by messing with the existing math for each <figure> so the rotateY() is adjusted with the angle you want. And then compensate the translateZ() to be adjusted based on the new rotateZ() angles position. I messed with this in the browser, but I suck at math on the fly without trial and error with limited time. :blink:

 

But like @Carl advised a codepen actually showing this in action would go along way in helping us (the GreenSock community), see what this is supposed to look and animate like.

 

Happy Tweening! :)

  • Like 2
Link to post
Share on other sites

Here you go. There was a whole lot of slightly weird stuff in the codepen I forked, some things that had no use and other things that didn't follow the same coding style, as if someone else had modified the pen but still saved it in @Jonathan 's account... I'm not sure what happened there... anyway, I cleaned it :)

 

See the Pen yKEMrj by Acccent (@Acccent) on CodePen

 

edit: changed the image service to loremflickr since apparently unsplash is down...? also now it picks 10 different pictures

  • Like 6
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×