Popular Content

Showing most liked content since 11/12/2017 in all areas

  1. 6 points
    I've made a few games using GSAP: Nevergrind - Single-Player RPG Firmament Wars - Realtime Multiplayer Strategy Game I have no regrets using GSAP. It's my favorite tool and as far as I'm concerned it hasn't limited me in any way and I feel very productive with it. I plan to make a 3rd game, a multiplayer co-operative rogue-like follow-up to Nevergrind. Developing games with GSAP is a pure joy. If needed you can even pause the game, as long as you don't use setTimeout or setInterval. As long as every timer and animation is created using GSAP (TweenMax, TimelineMax, TweenMax.delayedCall), you can just do TweenMax.pauseAll() to pause the game (this can be done in Nevergrind by hitting ESC). Since GSAP can tween any object value using any ease, it's simple to Tween using the set method, onUpdate, over time, or whatever kind of animating you need to do. Hope that helps. Discovering GSAP was like finding the holy grail for me because I was seriously using JQuery's .animate before that.
  2. 5 points
    There are several different ways to workaround animating properties like top, left, bottom, and right. The easiest is probably to just position your element in its end state, and then animate to it using transforms like x and y. That will allow you to use responsive units, like left: 50%, but without any performance penalties.
  3. 5 points
    To animate element's top or left properties you need to set it's position. Animating left, top can give you poor performance because it causes browser repaint every time you animate top, left. Instead you can x, y for transformation.
  4. 5 points
    There is currently no logic in place to check for individual class names so it must follow the order found by doing this. var className = myElement.getAttribute("class"); Just an FYI, changing class names without jQuery is now pretty easy. Won't work on SVG in IE though. myElement.classList.add("foo", "bar"); myElement.classList.remove("foo", "bar");
  5. 4 points
    There is no built in method to do it. Following is demo that shows how you can calculate coordinates inside target. Also, you can just perform hitTest onRelease callback rather than doing it on every drag, unless you need to do it for some other effect.
  6. 4 points
    Hi @Susan You just forgot to add TweenMax JS In codepen in the JS panel you will see a gear icon. Click that and you will see the dropdown and script fields to add js library URL's
  7. 4 points
    Yes. But it's really important that you draw all the lines at 0,0 and at the same angle. Then group them. Then, move the group. That way, you're making sure the line itself is at 0,0. The group is whatever translation you used. Then, you scale the line, not the group and it should be fine. However, that is only a simple solution if your graphic is static. If you have a dynamic one, you will want to animate the dash-array and dash-offset properties.
  8. 4 points
    Hello @Susan and Welcome to the GreenSock Forum! Just to add to @Sahil's great advice. Using his code i would make one small change. convert left to x (translateX). This way you are using CSS transforms which can animate smoother versus CSS position offsets that can trigger layout on each render tick. //wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded - all images, links, css, scripts, fonts, and other media assets window.addEventListener("load", function(){ // run animation code here TweenMax.to(".logo", 2, {x:600}); }); }); More info on why this better found here: CSS Tricks Article by @GreenSock's Jack: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ Paul Irish Article also on this subject: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ The window load event makes sure that your logo which i presume is an image is only animated when the DOM is ready (HTML markup), and the window is loaded. Meaning only run your code to animate the image when both DOM and window is loaded so your animation fires consistently cross browser. Happy Tweening!
  9. 4 points
    No you will have to use two separate timelines for reverse and play. If your animation is too complex, you can create master timelines and add timelines to it using functions. Following are tutorials for complex timelines
  10. 3 points
    That's because you are adding new tween into same timeline every time your mouse enters or leaves. And timeline waits for previous animation to finish before it starts playing next animation. Simpler way would be to use TweenMax or Timeline inside the event.
  11. 3 points
    Interesting. It happens because 'named elements' (elements that have id or name) are added to document object as properties, that's why it works. But in general you should stick to writing string as '#light', it saves you from potential conflict issues where you might use variable with same name as id. If that's confusing you, using light works in most browsers but I will suggest to practice using '#light'. Here you can read more if you are interested.
  12. 3 points
    It's not displaying because you've got opacity set to 0 in your CSS (so it's invisible). And you're trying to target an object named "light" in the tween instead of using selector text like "#light". Here's a fixed fork: Does that help?
  13. 3 points
    Hello @opila, The CSS filter property, especially the filter drop-shadow can be a big resource hog. You could try and use the CSS box-shadow property, which is used for the very purpose of giving elements like <img>'s a drop shadow. box-shadow can also be a resource hogs but not as bad as CSS filter drop shadow which are still somewhat buggy in all browsers. But box-shadow is your best bet for a drop shadow effect on a box. The flickering can also be resolved by using various CSS transform supporting properties like transform -axis: preserve-3d, backface-visibility: hidden, and the use of the perspective property or the CSS transform: perspective function (transformPerspective). But glad you got it sorted.
  14. 3 points
    Yeah, the new Firefox is a bit of an odd beast performance-wise. It looks like certain things are optimized and others are totally NOT. Like when animating top/left/width/height, it's horribly slow compared to Chrome. But transforms are much better. Another oddity is that for some things, WAAPI significantly outperforms CSS transitions even though they're supposed to use the same mechanisms under the hood. I already talked to the Firefox folks a couple of weeks ago about the really bad top/left/width/height animation and they said they think it's a Firefox bug. And it's affects all other JS libraries too, of course - it's not a GSAP thing. Hopefully they'll fix things soon.
  15. 3 points
    You need TweenLite first, it is the lightest with limited features. You can then use other plugins with it. For example, based on your current code you need TweenLite, TimelineLite and CSSPlugin. Here you can read about which plugin does what: https://greensock.com/docs/Plugins Here if you click on download button, you will see different options like Robust, Lightweight, Customize which can also give you some idea about which plugins to use. https://greensock.com/gsap
  16. 3 points
    Sure it is possible, if you are familiar with events and callbacks you can do it easily. If this chat bot you are mentioning has callback or raises event every time it replies, there you can write a gsap code for animation. For example, in following demo every time you click anywhere, it responds to an click event and animation changes.
  17. 3 points
    Hey @timdt! I see the a couple of people has mentioned this to you so, I thought I'd repeat it here in a bit more detail. CodePen does a lot of the setup for you and is designed to make coding little snippets super easy. In the HTML tab, you only need to add what goes inside the <body> tag. There's no need for anything else. The CSS and JS tabs, as their names imply, you add the CSS and JavaScript, you can use SASS, Babel and a bunch of other precompilers and/or other useful tools. When you need to add an external library, like, GSAP, click on the settings button on the top right. It will open a modal window. Head to the JavaScript tab in the modal and look at the bottom, there's a dropdown 'Quick-add' button. There you can set a bunch of other options. But you really won't need to change anything you don't want to try. As for your question, I think you are trying to do a bunch of things at once but are a bit lost in the details. You have two SVGs and one wrapper object. Your wrapper object is set to be 1000px wide and high. One of your SVGs is 500px wide and high. It is also absolutely positioned while the other SVG has no set width and height but has a viewBox of "0 0 1366 768". Effectively, the two SVGs are of different sizes. And since you have on absolutely positioned, it will sit on its position relative to the first parent that's doesn't have a 'static' position. In order for you to make sense of what's going wrong here, you need to understand how SVG scales and how elements are positioned with CSS. https://css-tricks.com/scale-svg/ https://developer.mozilla.org/en-US/docs/Web/CSS/position
  18. 3 points
    A few ideas: 1) Just put each game in its own iframe. Done. Very easy and clean. 2) Use the "data" property of the tweens to tag them with an identifier for which game they belong to. Then use the getAllTweens() and loop through the array and kill just the ones that match what you're looking for. Kinda like: TweenMax.to(...{x:100, data:"game1"}); TweenMax.to(...{y:50, data:"game2"}); killTweensOfGame("game1"); function killTweensOfGame(name) { var tweens = TweenMax.getAllTweens(), i = tweens.length; while (--i > -1) { if (tweens[i].data === name) { tweens[i].kill(); } } } Obviously that means adding "data" to every one of your animations which may be a tad cumbersome. 3) Create a TimelineLite for each game, and populate it accordingly. var game1 = new TimelineLite({autoRemoveChildren:true, smoothChildTiming:true}); var game2 = new TimelineLite({autoRemoveChildren:true, smoothChildTiming:true}); game1.to(...); game2.to(...); //then to kill all the game1 tweens... game1.kill(); //or game1.clear(); Does that help?
  19. 3 points
    Nothing really, you are doing great. Just if you don't know, you can pass tweens to ScrollMagic and it will play and reverse it for you. So if you are simply reusing same tween, you can use 'tween' method of ScrollMagic to pass tween.
  20. 3 points
    Hey Sahil, What you are doing is totally fine. Here is an alternate approach using addPause()
  21. 3 points
    I am bit confused, as you are saying certain part should reverse then play normally, won't that cause the jump in animation? You can just use tweenFromTo and pass labels in reverse order. BTW just because you are using nested timelines doesn't mean you should add everything to master. I mean if you want certain animation to reverse, you just call that part function and play it in reverse. Or create master2 timeline and call it separately. I hope that gives you some ideas. I can't really visualize what you are doing so if possible post a codepen demo that will be easier to answer.
  22. 3 points
    thanks, @Sahil @Jonathan and @Carl to clear this out. I was struggling to do this with a single tween. I think it involves two tweens. but this makes sense now. big thanks to @Carl .. :)
  23. 3 points
    Hello @Desmond and Welcome to the GreenSock Forum! This is possible using GSAP callbacks like onComplete, onStart, or onReverse in your tweens or timelines. For example, this codepen shows how you can trigger a non GSAP operation like playing a video after a tweens animation completes: Happy Tweening Resources: TweenMax Docs: https://greensock.com/docs/TweenMax TimelineMax Docs: https://greensock.com/docs/TimelineMax
  24. 3 points
    Source So I found out how you can use dasharray and dashoffset. But I am not sure how it can be used instead of multiple lines. I guess you will have to calculate distance between each circle then animate the offset.
  25. 3 points
    You can remove multiple class names with 2 separate tweens: TweenLite.to(".green", 2, {className:"-=open"}) TweenLite.to(".green", 2, {className:"-=white", overwrite:"none"}) This is the first time we've heard of this so we will have to weigh the pros and cons of supporting multiple classes in one line. Thanks for bringing it to our attention.
  26. 3 points
    Hi and welcome to the GreenSock forums, Yeah, moving from AS3 to EaselJS has some super frustrating stumbling blocks. 2 options. 1: Create a global reference to the stage (aka root) like var root = this; function playAnimation() { TweenMax.to(root.mcThing, 3, {x:500}); } playAnimation(); 2: pass the scope into the function function playAnimation(scope) { TweenMax.to(scope.mcThing, 3, {x:500}); } playAnimation(this); I prefer option 1.
  27. 3 points
  28. 3 points
    I've told @OSUblake that he's got an open invitation to write guest posts on the GreenSock blog.
  29. 3 points
    No it's alright, happens with everybody.
  30. 3 points
    HI Tom von Mom, Sorry to hear you hit a snag. We rarely recommend that folks animate left and top. Where we show that in the getting started video we make a note of setting the position property at 1:33 It's also mentioned in the video description on youtube. If there's somewhere else on the site we have examples of animating left and top that need better descriptions please let me know. Thanks.
  31. 3 points
    Stop messing with zoom, and forget everything you know about it. It's a non-standard feature, and it may be removed from a browser at any time. Use scale instead. It does not affect the layout. Zoom is an OLD property from Internet Explorer 5.5, and was used to scale content long before scale transforms became available. That's the best advice you're going to get from here or anywhere else. Follow that demo I made for you. It works. For saving the locations to a database, do it just like you're doing with local storage. If you plan on having multiple people using the app at the same time, I would recommend using a realtime database like Firebase. Otherwise you're going to have to deal with people making changes at the same time. https://firebase.google.com/products/realtime-database/ Here's a draggable demo I made using Firebase. It's completely serverless, so no dealing with programming a back end using something like PHP. Everything is done using JavaScript. Open your browser up in 2 different window to see it update in realtime.
  32. 3 points
    Looks good! A couple of things I noticed. Everybody messes up on this, but when using Math.atan2(), the y component goes first. You had the x component first, giving you a vertical angle. That's why you had to negate the y component and subtract 90 degrees. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 How did you come up with this? if (count % 115 === 0) { fullRotation++; } That's not going to work. The change in rotation is not constant, and if you go backwards while that is true, it will keep increasing the fullRotation count. To get the number of full rotations, keep a running total of the forward changes in rotation, and divide by 360. Here's your demo with some of those changes. Didn't know if you wanted the trigger to be a circle or square, but I made a circle and slightly visible just so you can see it. I have some ideas on how to do other parts of your fishing game, but I'll do that it another post tomorrow.
  33. 3 points
    Hi and welcome to the GreenSock forums, In cases like this it would really help both you and us if you create a reduced test case using CodePen. Usually in this process of reducing the code you'll stumble into the error, and if not we have something that we can tweak and test. more info here: After digging through your live site I found the javascript. I'm curious why you are using a position parameter of "-=7.7" seconds. tlMenu .set($('.menu-click a'), {zIndex:111}) .to($menuClick, 0.5, { xPercent: '-=100', ease: Power3.easeInOut},'-=7.7') .to($menuBar, 0.5, { xPercent: '-=0', ease: Power3.easeInOut},'-=7.7') .fromTo($menuWork, 0.5, {autoAlpha: 0, xPercent: '50'}, {autoAlpha: 1, xPercent: '-100', ease: Power3.easeInOut}, '-=7.7') .fromTo($menuAbout, 0.5, {autoAlpha: 0, xPercent: '45'}, {autoAlpha: 1, xPercent: '-100', ease: Power3.easeInOut}, '-=7.6') .fromTo($menuContact, 0.5, {autoAlpha: 0, xPercent: '40'}, {autoAlpha: 1, xPercent: '-100', ease: Power3.easeInOut }, '-=7.5') That means you are trying to add these tweens 7.7 seconds before the timeline begins. I would remove all those and see if you get better results. Here is an article explaining the position parameter https://greensock.com/position-parameter
  34. 2 points
    You could just separate that part into a different tween that has a longer delay, like: TweenMax.to("#box", .5, {delay:2, x:615, y:615}); TweenMax.to("#box", 0.2, {delay:2.3, scale:1}); Of course you could easily set it up in a timeline if you prefer: var tl = new TimelineLite({delay:2}); tl.to("#box", .5, {x:615, y:615}) .to("#box", .2, {scale:1}, "-=0.2"); I personally find it easier to set things up in their end states and then use from() tweens to animate them into place instead of doing the math to figure out the opposite. So if I were you, I'd do it like this: Happy tweening!
  35. 2 points
    I think this old pen may be of help. press the buttons whenever you want. The current animation will reverse before the requested animation plays. Its set to run super slow so you can see how it works
  36. 2 points
    Hello @dominium and Welcome to the GreenSock Forum! In order for it to work with just TimelineLite you need the following <script "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js"></script> <script "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TimelineLite.min.js"></script> <script "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/CSSPlugin.min.js"></script> So in explanation: TweenLite.min.js - main GSAP script that is required since your not using TweenMax.min.js TimelineLite.min.js - since you want to use timelines CSSPlugin.min.js - since you want to animate CSS properties You would need all 3 if you don't want to only include TweenMax.min.js. Hope that helps!
  37. 2 points
    Yes and no. You can't animate flexbox so you will have to do some extra work for it. There are some issues with your entire setup at the moment, for example you have nested '&.active' class under '.accordian-group.item' but from javascript you are adding active class to '.accordian-content'. Following is the thread where @OSUblake explains how you can animate flexbox by recording start and end positions. In current situation you will have to expand and shrink columns.
  38. 2 points
    This is exactly what I needed Sahil, I've never seen or used getBoundingClientRect before! Much simpler than the method I was going to go with. I do need to perform the hitTest on drag as I'm giving users feedback when they have entered the dragging area. Thank you very much for your help.
  39. 2 points
    Hi @timdt, Please use CodePen in the 'correct' manner: separate HTML, CSS, JS codes. It´s easier to analyse. Thanks Mikel
  40. 2 points
    @Jonathan I see, so shy, I'm a newbie on this. Thank you so much for your kind pointer!
  41. 2 points
    Soon you will be one to be showing others the ropes.
  42. 2 points
    Big Thank You to @Carl for his solution, using the overwrite special property after the first add className Taken from TweenMax Docs special property overwrite: overwrite: String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property): "none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time. "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet. "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.
  43. 2 points
    Hi warren, nice to see you again. Yes, GSAP can handle animation in a game, but there is a lot more to making a game than just making things move. For character movement TweenLite may not be the best choice as a tween has fixed duration and destination. For instance if pressing the right arrow key creates a tween that moves something 100px to the right of its current location for 1 second, what if the user wants to move 300px? will the user need to press 3 times or will you have to program some awkward logic that repeatedly checks if a new motion tween should be created once the first tween ends. What if while the character is moving to the right the user hits the down arrow? Will you need to write code that kills the tween that is moving to the right? Character movement is usually handled by making small increments to x/y values while a particular key is down. If you want to move enemy ships around or fire bullets, tweens would be great. My suggestion is to start small with very very low expectations. Get something small working and then try to figure out how to add more features. 95% of building your game will be writing code un-related to animation: collision detection, scoring, generating enemies, generating missiles, programming input controls, etc. I would suggest going to some sites that focus on general HTML5 Game Development and learn the basics without using GSAP at all. Add GSAP only where it makes sense or makes things easier.
  44. 2 points
    Have you tried tween.seek(0).pause() ? Just for future queries, you will get answers a lot quicker if you provide a demo with reduced code that shows your specific problem.
  45. 2 points
    Sorry for the confusion, to animate left and top properties. You need to set position of that element using CSS. If you add following CSS, it will work .logo{ position: relative; }
  46. 2 points
    Hi and welcome to the GreenSock forums, That CodePen demo was related to this post: As you can probably tell from the source code it isn't really a "beginner-friendly" type of project If you have a specific question, I'd suggest asking @OSUblake in that thread.
  47. 2 points
    Nah, you'd probably never notice a real-world difference but technically TweenLite's render method is slightly faster just because it doesn't have the conditional logic for repeats/yoyos. I'm in the habit of using TweenLite always unless I need a TweenMax feature, but that's only because I'm a performance nut. Again, I highly doubt you'd ever even notice a difference if you're tweening 1000 things simultaneously. You don't need to feel hesitant about using TweenMax.
  48. 2 points
  49. 2 points
    It's looking pretty good. You can check out all the demos and source code for the Foundation HTML5 here. http://lamberta.github.io/html5-animation/ rAF will actually cutout if you switch windows/tabs. But that brings something I just quickly noticed in your code. You don't have to keep calling Date.now(). rAF passes in the time to the function it calls, so you can pass that value into your objects. If you want, here's part of a ticker I use.
  50. 2 points
    @OSUblakeHere is another dirty demo of what I got working, it's not a proper demo so be sure to close it when you're done since it'll keep running raf. Again there are a lot of leftovers from trial and error but roughly what I have achieved so far. I have been tinkering trying to find a sweet spot for when the particle should spawn from either the a portion of the emitter's life to when a particle starts falling. The latter seems reasonable but the time variances each particle falls causes faster spawns and the spawns themselves vary since the setup is very loose. I will most likely have to figure out size/opacity over life soon as it'll give me a better idea of how to recreate the fluid motion rather than a monotonous one. I just recently saw a demo involving gravitational fields but nothing too complex, it's a good resource to have though. I checked out the Physics for JS book a few weeks back at a bookstore but it involved ventures out of my current scope but the Foundation HTML5 looks interesting. I'll check if google books has a preview of it, if not I'll check it out at the local bookstore if they have it.