• Content count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About hemmoleg

  • Rank

Recent Profile Visitors

877 profile views
  1. setting perspective ignores z-Index

    sure, have a look at this. its basically a bunch of '1024' boards (the mobile game) next to each other. the inputs for each board a generated randomly. Now the whole perspective thing started when i wanted to have a 'spinning merging animation'. This means when two pieces with the same value 'merge', the piece should spin around its y-axis. Now to have a proper 3d effect i had to set a perspective somewhere and at first i thought i want to have a perspective at each td but this would disregard the moving 'camera'. So now what i do is, i have all the boards in one div (#tableContainer) and this div receives a perspective and i constantly update the perspective-origin while the 'camera' is moving. Also that brings me to another question: i move the 'camera' like this TweenMax.to($('#tableContainer'), 45, {bezier:{curviness:1.2, values:anchors}, ease:Power0.easeInOut,onUpdate:this.Update, repeat: -1}); So i fake the camera movement by constatly translating the #tableContainer. In the Update method i manualy recalculate the #tableContainer perspective-origin. But i think this is not the best way to do it. Do you know a better to update the perspective origin?
  2. setting perspective ignores z-Index

    Thanks for your answers. Yesterday after starting this thread i kept reading a lot about perspective and zIndex. I also already tried Dipscom's 'hack'. Unfortunately its not applicable to my project. I guess i will try something a little different now.
  3. setting perspective ignores z-Index

    hey, when you look at the codepen the blue div disappears behind the green divs although the blue div has a zIndex of 5 and the green divs have a zIndex of 0. Now if you comment the first line where the perspective is set the blue div is always in front of the green divs.
  4. Apply bezier to scrollTo()

    No problem. So far what i am doing is: i have a div which i am moving around like this: TweenMax.to($('#background'), 20, {bezier:{curviness:0, values:anchors}, ease:Power2.easeInOut, repeat: -1}); the div is always basically twice the width and the height of the viewport and i have overflow: hidden. The problem is, since the div is made up of a lot of other divs the movement is not 100% smooth, so every now and then the movement stutters a little. My goal is instead of manipulating the div itself, i want to manipulate the position of the viewport because its a lot easier on performance. If its still not clear what i wanna do, i could make a gif and link to it. EDIT: i did some more testing and as it turns out scrolling is just as performance consuming as using transform so you can ignore this thread.
  5. Apply bezier to scrollTo()

    hey, is it possible to apply a bezier to the scrollTo() method? Something like this TweenLite.to(window, 5, {scrollTo:{{bezier:{curviness:1, values:anchors}}});
  6. Thank you very much for your answers! Super helpful and easy to understand. It doesnt matter to me if i use element.transform = "matrix(1,0,0,1,0,0)" or Set(). I just wanted to know whats going on under the hood so i can better understand what is happening.
  7. I am sorry. What i meant is what is the difference between TwennLite.Set(target, {x: 0}) and target.style.transform? When running the codepen you can also see that for a split second the div returns to its original position (0, 0) after the first tween is finished, but when the second tween starts it jumps right back to where it ended up after the first tween (100, 0), although i reset its transform property. Why is that?
  8. What is the difference between TweenLite.to(target, {x:0}); and target.style.transform = "matrix(1, 0, 0, 1, 0, 0)"; , except that the second line sets more than just x? The codepen is just there to illustrate the question: if you uncomment the TweenLite.to the seconde tween starts from the same position as the first tween (0,0) whereas otherwise the second tween starts from where the first ended (100,0).
  9. Weird easing behavoir

    Sorry for being late, i upgraded my pc and it didnt go all as planed. Anyway, i found the issue. Since i am testing TweenMax in an already ongoing project i already had a transition property defined on the div wich got in the way of tweening. I removed it and now it works as it should. Thx for all you answers though
  10. Weird easing behavoir

    Hey, I just started using GSAP and already ran into an issue. Basically not only is the 'ease' parameter not working at all, no matter what value i set. Also the default ease is somewhat weird. Simple example: i want to move a div from 0/0 to 100/100. I simply call TweenLite.to($('#settings'), 1, { x:100, y:100}); what happens is that for about the first half of the way the div moves rather slow, but then suddenly accelerates and for the rest of the distance moves a lot faster. Again, using something like "ease: Power3.easeInOut" doesnt do anything for me. Also I didnt set any default easing.
  11. thx for the answer. unfortunately it doesnt work as i would like it to. the thing is, for easing i use Quad.easeInOut so when i call updateTo() the mc moves to the right coordinates but the easing (accelerating and decelerating) starts all over again and this is exactly what i meant by "breaking the animation". so what happens is: i click the button, mc starts to accelerate, i click the button again, mc stops and starts to accelerate again. Is there a way to have a smooth transition there?
  12. hey, in essence my problem is as follows: i have an movieclip and a button, if you click the button the mc moves 100px to the left. what i want is: i want to be able to click the button again while the mc is already moving, so the mc would end up 200px to the left. so i think i somwhow need to update the tween on the mc with a differen target position. i konw i could just replace the already running tween but then the animation would look bad since i am using easing for the movement. how can i update the tween with a new tartget position without screwing the animmation?