Jump to content
Search Community

Leaderboard

Popular Content

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

  1. Hello @Rager and welcome to the GreenSock forum! Its always best to only run your animation when the DOM (HTML and or SVG markup is loaded and ready) and the window is fully loaded (images, links, fonts, stylesheets, js, and other media assets) Try this so you only run your GSAP code when DOM and Window is loaded and ready: // wait until DOM is ready (html and svg markup) document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, external JS, external stylesheets, fonts, links, and other media assets) window.addEventListener("load", function(event) { // makes sure it runs after last render tick window.requestAnimationFrame(function() { // GSAP custom code goes here }); }); }); Happy Tweening!
    5 points
  2. Previous discussion about waiting until assets are fully loaded before animation starts. May help if it's a problem with assets loading.
    4 points
  3. Not sure what you are attempting to do and what problem you are facing. Can you post a simple codepen demo so we can understand your problem?
    2 points
  4. I don't have time to dig into this at the moment, and it's very awkward to try to troubleshoot a live site like this with many other scripts involved, but it's very unlikely that it's a GSAP thing. It sounds like it's more likely an issue with your code depending on assets being fully loaded but they're not. Like, for example, if you try to get an offset or a width/height or some other measurement BEFORE all the images finished loading completely, the reflow didn't happen yet and the measurements will be off. So make sure you don't fire off your JS code until everything is fully loaded. If you still need help, it'd be awesome if you could provide a reduced test case, like in codepen. We'd love to help - it's just tough on a live site. Happy tweening!
    2 points
  5. Thank you guys for your help. Point C and Carl especially. I am going to have a look at your best informational articles and videos! In the meantime I have finished my second mini game! You can have a look and tell me your comments! Thanks!
    1 point
  6. Hi @makis2404, Looks like you're progressing nicely. Good job. I think it's always easier to learn with actual projects. My one recommendation for you would be to create your timelines ahead of time rather than each time you click. You can then play() them with a click. Just like I showed you in your other thread here: The main thing right now is just to have fun and keep practicing & learning. Happy tweening.
    1 point
  7. Here's something I threw together. You might be able to learn from it. Hold down the mouse button and get rid of those pesky bees.
    1 point
  8. Try making it more challenging. Maybe start with indirect fire using a paladin. ( @mikel knows what I'm talking about ?) Then you could add in a goal, like having to kill the enemy within a certain amount of time. Indirect fire is a core game mechanic in Worms. Really fun! You can animate a projectile along a parabolic path using the Physics2DPlugin. https://greensock.com/docs/Plugins/Physics2DPlugin And for very simple collision detection between the projectile and the enemy, you can use Draggable's .hitTest() method. https://greensock.com/docs/Utilities/Draggable/hitTest
    1 point
  9. okay, if I understand your desired outcome correctly, I'd recommend creating the explosion timeline ahead of time rather than every time you click. You can then play() it on each click. In that click handler you can pause the tank timeline and then add a delayedCall to resume() it. Maybe something like this: Does that help? Happy tweening.
    1 point
  10. Oh, gosh, you're gonna love TimelineLite and TimelineMax. I assume you haven't seen them yet. Here's a little video: http://www.greensock.com/sequence-video/ You can just do: var animation = new TimelineLite() animation.to('#image1', 3, {scale:1.5, ease:Linear.easeNone}) .to('#slide1', 3, {opacity:1, ease:Linear.easeNone}); And then you can control the entire sequence as a single instance. pause(), resume(), reverse(), timeScale(), whatever. Once you get the hang of timelines, they can revolutionize your animation workflow. You can break things apart into modular pieces and since timelines can be nested inside other timelines, you can build things as you go. Docs: http://api.greensock.com/js/com/greensock/TimelineLite.html Have fun.
    1 point
×
×
  • Create New...