Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 01/01/2018 in all areas

  1. Hi @Annika Providing a simple demo is always the best way to get help, even if it doesn't work. You only have 1 object, demos, but you need 2 objects. The best way to go about what you're doing is to create an array of objects. You can add more animations later by adding another loop, but this should help you get started.
    5 points
  2. 5 points
  3. BTW, there is only 1 box variable, and it's not copying the object. You can copy the value of a primitive (string, number, boolean, null, undefined, symbol). // Copies value var foo = "eggs"; var bar = foo; foo = "ham"; console.log(foo); // "ham" console.log(bar); // "eggs" For everything else, it's not that straightforward. Try searching for pass by value and by reference as it can be hard to explain. Variables do not store the value of an object, they just hold a reference to an object's location in memory, kind of like a home address. And just like your home address, it can be passed around and be used by more than 1 person. Notice how alpha and bravo appear to have the same value, but they are not equal. On the other hand, alpha and charlie are equal even though I changed the value of the msg property. That's because they are pointing to the same object. var alpha = { msg: "Hello World!" }; var bravo = { msg: "Hello World!" }; console.log(alpha === bravo); // false // Copies reference var charlie = alpha; charlie.msg = 123; console.log(alpha === charlie); // true console.log(alpha.msg); // 123 console.log(charlie.msg); // 123 And about there only being 1 box variable, that's because of something called hoisting. There is no difference between these two loops. All var declarations are moved to the top of their scope by the JavaScript compiler, so the first loop will end up looking just like the second loop. for (var i = 0; i < 2; i++) { var box = boxes[i]; } var box; for (var i = 0; i < 2; i++) { box = boxes[i]; } That's why this crazy looking code is totally valid. The num variable gets moved to the top. num = 8; num += 4; var num; console.log(num); // => 12
    3 points
  4. And it looks like @Sahil demo is almost identical to mine
    3 points
  5. You can animate them by recording new position as shown in following thread, it shows flexbox but I think you can achieve same in your implementation.
    3 points
  6. Hello dear friends, Kind regards Mikel
    2 points
  7. Very nice, @mikel Happy New Year to you and the rest of the GreenSock community!
    2 points
  8. Yeah. It's faster, easier to read, and less error-prone. In the first loop it might seem pointless, until you want to add another tween and have to type boxes again. In the second loop, it's more apparent. // harder to read, and easier to make a mistake for (var i = 0; i < boxes.length; i++) { rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height); }
    2 points
  9. Mikel, Happy new year! Wish you and GreenSock community great 2018!
    2 points
  10. 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
    1 point
  11. Ya you can push objects in array in first loop, I have updated my demo.
    1 point
  12. It always hard to tell what's going on with projects that import files. For a quick sanity check to see if the plugin is even loaded, try to log out the version the number. console.log("DrawSVGPlugin Version", DrawSVGPlugin.version) You can also see what plugins are loaded by logging this out. console.log("GSAP Plugins", window.com.greensock.plugins)
    1 point
  13. Tweens usually aren't ideal for user controlled animations, like with moving an object around in a simulation or game. Not saying you shouldn't use a tween, it's really hard to say without seeing what's going on, but a physics based animation might be easier to control. If you want to use a tween, @PointC suggestion of using the ThrowPropsPlugin might work well... And if you're interested, here's a good intro to physics book. I don't know if it will apply to what you're doing, but there is a chapter that goes over buoyancy. http://a.co/cVI6Qww
    1 point
  14. I'm not sure if it will help with what you're doing, but the ThrowPropsPlugin has a track() method that will allow you to track velocity. https://greensock.com/docs/Plugins/ThrowPropsPlugin Happy tweening.
    1 point
  15. One problem with that is that it doesn't seem to work for touch. You can push them out of view... http://codepen.io/osublake/pen/EjbXda/ If you know the height of the container, you can hide them with nesting. http://jsfiddle.net/OSUblake/q6kqdroq/1/ Not sure if other browsers support this yet, but you can hide them with css in webkit. ::-webkit-scrollbar { display: none; }
    1 point
×
×
  • Create New...