Dr3am3rz

Hi guys, I have made a greeting card that will flip open when clicked but it looks kind of fake. So I thought of including a 3D Parallax on mousemove but everything looks so flat. How do I make it look like it's real? I have tried on changing the perspective value but there's no effect. Can anyone help me out on this? Thanks in advance guys!

Hi Jonathan, I think I got it to work. It's just 1 stupid line which I took till now then realized that. -.-" I need to set the div wrapper for top flap z-index to 0 when the top flap is open. lol Thanks for your help anyway! =D

Hi Jonathan, Thanks for your help! Noted on the alpha and I have also changed to animate y instead of top. I saw your working example but it is still the same issue that I am facing, the letter is still being overlapped by the top flap. Logically, the letter should be overlapping the top flap when it slides out just like how we take out the letter from an envelope in real life. Not sure if you get what I mean.

I am doing an envelope animation using GSAP, been facing quite a lot of issue but couldn't find much help online. I am trying to make some animations to 1) rotate from the front of the envelope to back of the envelope, 2) opening of flap and 3) a letter coming out from an envelope. Currently I am on step 3 now and struggling with "looks like z-index" issue but I am not sure whether is it because of z-index. Somehow I could not get the letter to overlay on top of the flap opening. Hope you guys can help me out. Thanks in advance.

Hi guys, I am trying to make some animations to 1) rotate from the front of the envelope to back of the envelope, 2) opening of flap and 3) a letter coming out from an envelope. Currently I am stuck now as I can't get the 1st step to work. I have use rotationY and it seems that it's working fine but I'm not getting the result that I want. I have been searching online on how to do this for 2 days already but it looks like there are not much result out there that is related to gsap + rotation for my issue. Hope someone can help me out here. Thanks in advance!

Thanks Carl for the suggestion! Thanks Jonathan for the example you have created! Will take a look at it when I have more time, ask you again if I have any questions! =D

Hi guys, I wanted to do something like sort of split 1 whole image and rotate by individual columns and eventually form a cylinder shape and make it spin. So far I have managed to split and rotate them to form sort of cylinder shape but somehow it doesn't look complete. I have tried rotating differently but still unable to get it to look like a complete shape. I have to include a hidden image so that you guys can view the image at a certain angle, not sure why. It's working with a few images but not only 1 image. Thanks for the help in advance!

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!

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?

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.

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.

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!