Jump to content
Search Community

hemmoleg

Members
  • Posts

    16
  • Joined

  • Last visited

Everything posted by hemmoleg

  1. Ohhh ok, now I get it. Thanks!
  2. The pen works fine for me in both chrome and ff. When I run it localy it also works in ff but not in chrome. However OSUblake is right, when I test on my website, it again works in chrome and ff. So the only issue is that its not working localy in chrome. Is that the same for you, or is it just me?
  3. Hello Jonathan, thanks for your answer, while unfortunately none of the suggestions you made have helped I found something else. I usualy use chrome for most of my development and debugging so I only tested it there. Today I also tested it in Firefox and there it works! I am using Chrome 64.0.3282.186 64bit and Firefox 58.0.2 64bit. Do I need to change some setting in chrome maybe? Heres the codepen with my testcase:
  4. hey I have an issue with the CSSRulePlugin. This is the head of my website, I kept it as simple as possible to showcase my problem: <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSRulePlugin.min.js"></script> <link rel="stylesheet" type="text/css" href="default.css" /> <script src="js/classie.js"></script> </head> I get an error saying: "DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules" JS looks like this: var rule = CSSRulePlugin.getRule("#t1:after"); But going by the error I think it has nothing to do with what rule I am trying to access. However, I tried using the CSSRulesPlugin in a codepen and there it works. What am I missing?
  5. 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?
  6. 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.
  7. 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.
  8. 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.
  9. 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}}});
  10. 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.
  11. 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?
  12. 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).
  13. 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
  14. 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.
  15. 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?
  16. 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?
×
×
  • Create New...