Jump to content
GreenSock

donkey

Rotate images around a center in a tilted plane

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,

 

I'm an absolute beginner with GASP and all the JS animation stuff.

 

My aim is to have an animation where multiple images (pictures of my family) are rotating around an christmas tree image. Every image should be clickable in the end to reveal the secret santa for this person.

 

I managed to get a rotating dot (see the codepen). But it kind of "stops" on the starting position.

 

Things I have no clue of how to realize:

  1. The images are rotating around the tree. So as soon as they behind the tree -> They're not visible for a short period of time
  2. The rotation is now in the same plane. I want to tilt it a bit: As the images "travel" in the background they should gain a bit in y direction and the other way round when coming to the front again
  3. Bonus: The speed of the rotation should depend on the mouse position: The further away the faster the spinning. Stopping when the mouse is almost at the orbit

 

Any help is highly appreciated!

 

/Donkey

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

Link to comment
Share on other sites

That's pretty advanced thing for beginner to do especially if you are not familiar with JavaScript or 3D transforms in CSS. I would encourage you to visit our learning page and start from there, https://greensock.com/learning

 

There is also youtube channel intended to introduce all the features of GSAP: https://www.youtube.com/user/GreenSockLearning

 

The more specific part you need for this particular project is understanding 3D transforms that you can learn at following page: https://greensock.com/docs/Plugins/CSSPlugin

  • Like 2
Link to comment
Share on other sites

Thanks for your reply, Sahil. I'm just new to the animation stuff. JS and jQuery are no problem. I understand the basics of transformation and know the CSS transformation properties. I had a look at the learning section but I assume I can't get it done just with the basics.

 

Would be nice to get some pokes in the right direction. I assume the "Animation along path" is what I need?

 

/Donkey

 

EDIT: I just saw that my CodePen wasn't saved ... So I understand why you directed me to the learning section :D

Edited by donkey
Wrong input
Link to comment
Share on other sites

Animation along path will just rotate them in 2d, if that's what you want to do then you can just rotate element by offsetting transform origin.

 

But it seemed like you were going for 3D effect, which is why I specified 3rd link. You need perspective on parent element and transform origin on the elements. So when you animate rotationY, the elements will rotate in 3D.

 

To change the speed based on mouse, you can change the 'timeScale' of individual tween or timeline.

 

When I was starting with GSAP I experimented with something similar, it was just 3D cube. It is not really what you are trying to do but it should give you some idea.

 

 

There is also a blog post by Chris Gannon for somewhat similar effect and explains how to set up your divs.

 

https://greensock.com/cube-dial-tutorial

 

  • Like 3
Link to comment
Share on other sites

Thanks again for the links (especially the cube dial tutorial is quite helpful).

 

I had not much time to fiddle around with it. It got this working so far:

 

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

 

It's rotating. But the z-Index is make trouble: one image's always on top no matter if it's in the (virtual) back or not. Also I would like to place a pic of a christmas tree in the center to rotate around.

And I have no clue how to entangle this in-plane rotation with a change of the y-values to get an out-of-plane effect. My problem here are the different starting points. From my (limited) point of view I'd need a sine function passed the current x-value to determine the y-value.

 

Any hints for me?

Link to comment
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.
×