Making image spin sideway

[Dr3am3rz]

Hi guys,

 

I am very new to GSAP and I am not familiar with the CSS 3D transformation and stuff too, so it's very difficult for me to understand what is going on.

 

I have somehow made the 1st step how I want my image effect to be but I am stuck on the 2nd step.

 

Based on the codepen that I have done up, I have rotated the image to sort of tilt to the side. The next step I want to do is to make it spin. Something like it's shown on GSAP website : http://www.nowyouseeme.movie/, towards the end, there is an Ace card spinning at a tilted angle.

 

I spent quite a lot of time testing all the possibilities but still can't figure out how to do it.

 

I may have used the wrong term explaining above, apologize for that.

 

Thanks in advance guys!

See the Pen akEOad by Dr3am3rz (@Dr3am3rz) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

All you're missing is add the normal 2D rotation to the image inside the container. Also I added an ID to the image in your HTML:

%img#card{:src=>"https://s32.postimg.org/9im9jyxkl/banner1.jpg"}

JS

tl
  .to($slide1, 1, {transformOrigin:"50% 50%", rotationX: 50, rotationY: 50, z: -200})
  .to('#card', 5, {rotation:1080, ease:Linear.easeNone}, "rotation")
  .to($slide1, 5, {z:-1200, y:150}, "rotation");

Happy Tweening!!

[Dr3am3rz]

Thank a lot Rodrigo!

 

I have 0 idea what is going on after looking at your code lol

 

A few questions :

 

1) I do not have to include the word "deg" in the value for rotation and px for z?

 

2) I have to separate the animation for div and the image? Can I straight away put all the animation command onto the div alone? 

 

3) Why do I need to include another "rotation" behind?

 

4) What do I need to include in order to make the card move away from the screen or to the left / right / top / bottom screen and disappear?

 

5) Is tweening possible to mak it like for example : bottom center move to top right but instead of in a straight line, it will sort of curve line?

 

Sorry, have to make you explain it to me.

 

I think GSAP is advance level right? Because I can't find any tutorial for a complete beginner.

[Carl]

I do not have to include the word "deg" in the value for rotation and px for z?

 

correct

 

I have to separate the animation for div and the image? Can I straight away put all the animation command onto the div alone?

 

What Rodrigo suggested is best. You are spinning on multiple axis in 3D space... very difficult to achieve with one element.

 

Why do I need to include another "rotation" behind?

 

I'm not sure what that means.

 

It may be hard to communicate properly but what you are doing by rotating on multiple axis and trying to move along a curved path in 3D space is probably one of the most complex effects you could try to attain. It just isn't something a beginner with any toolset can expect to achieve. Our support really has to stay focused on the GreenSock API, unfortunately we just don't have hours to devote to making really complicated demos for anyone that asks. What you want to achieve is certainly possible, just quite advanced.

 

I think you will find that you will get great help with the API and we love to encourage beginners. Its very important to take baby steps though.

 

Be sure to read and watch everything on: http://greensock.com/get-started-js 

 

A nice next step is Petr Tichy's series: https://ihatetomatoes.net/product/greensock-101/?ref=5

If you are interested in a very comprehensive overview of the platform and detailed step-by-step instructions through many projects check out our training manual: https://www.nobledesktop.com/books/gsap

 

My advice at this stage is to start small, read the docs to find answers, and come here often.

[Dr3am3rz]

Thanks Carl!

 

I have to separate the animation for div and the image? Can I straight away put all the animation command onto the div alone?

 

What Rodrigo suggested is best. You are spinning on multiple axis in 3D space... very difficult to achieve with one element.

 

So that means the card in http://www.nowyouseeme.movie/ is using many divs just to animate the different angle and position?

 

Why do I need to include another "rotation" behind?

 

I'm not sure what that means.

 

I am referring to  the rotation in this .to($slide1, 5, {z:-1200, y:150}, "rotation")

 

 

Yes, I will be here often from now on I guess. I will go through with the get started video again.

 

I have seen Petr's video but he don't really explain why and how, so it's kind of difficult for me to understand too if I want to do it on my own.

[Rodrigo]

Hi,

 

Sorry for not elaborate more in my previous answer.

 

I can't say how the movie site handles this, but as Carl mentions rotating an element in the three axis causes a very ugly issue, as the element behaves in an unexpected way. I'm not sure if this falls into a Gimbal Lock (https://en.wikipedia.org/wiki/Gimbal_lock).

 

Basically the parent element gets the X and Y rotations and with that in place, just rotate the image.

 

The "rotation" at the end of the instance is a position parameter. In this case a label called rotation. Then I use that position to add another tween for the $slide1 element. Like that all the elements are animated at the same time.

 

Master Carl created a great video explaining how this works and how to get great results with it:

 

http://greensock.com/position-parameter

[Dr3am3rz]

Hi Rodrigo, thanks for the explanation!

 

I have gone through the video by Carl but based on your code, you did not create a label called "rotation".

 

I am confused after seeing the video and comparing with your code. lol

 

We do not need to specifically create a label or define a label like what Carl did in the video. The first label that is being assigned right after any timeline is automatically mark as label. Is my understanding right?

[Carl]

.to($slide1, 5, {z:-1200, y:150}, "rotation")

 

that code will add a label called "rotation" at that tween's start time if a "rotation" label was not created previously.

 

This code

tl.to(elem, 1, {x:100})
  .add("rotation")
 .to($slide1, 5, {z:-1200, y:150}, "rotation")

will work the same as

tl.to(elem, 1, {x:100})
 .to($slide1, 5, {z:-1200, y:150}, "rotation")

Regarding the div nesting, you have to understand that the site you referenced does not use any divs. It is all canvas-based using Three.js which is a high performance 3D library. See the examples: http://threejs.org/

 

Three.js will have many more capabilities for 3D than what can be done in CSS alone. 

[Dr3am3rz]

I see! Thanks a lot Carl!

 

And thanks for the help for my referenced website. I have been wasting a lot of my brain juice looking at their code figuring out how did they do that.

 

You saved me a lot of time! Appreciated!