Popular Content

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

  1. 5 points
    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.
  2. 5 points
    Here is how I would do it.
  3. 3 points
    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
  4. 3 points
    And it looks like @Sahil demo is almost identical to mine
  5. 3 points
    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.
  6. 2 points
    Hello dear friends, Kind regards Mikel
  7. 2 points
    Very nice, @mikel Happy New Year to you and the rest of the GreenSock community!
  8. 2 points
    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); }
  9. 2 points
    Mikel, Happy new year! Wish you and GreenSock community great 2018!
  10. 1 point
    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
  11. 1 point
    Ya you can push objects in array in first loop, I have updated my demo.
  12. 1 point
    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)
  13. 1 point
    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
  14. 1 point
    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.
  15. 1 point
    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; }
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up