Leaderboard


Popular Content

Showing most liked content since 04/27/2017 in all areas

  1. 6 likes
    Thanks for the demo, very helpful. I think smoothChildTiming:true will help. Docs for smoothChildTiming: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/smoothChildTiming/
  2. 6 likes
    These are all great solutions, and traditionally I would recommend the same approach of creating a function that creates a random motion tween that calls the function again using onComplete. However, CustomWiggle can do a lot of this with very little code. A CustomWiggle always returns back to the start values. https://greensock.com/customwiggle This demo should provide constant random movement and return to normal position on pause. You can easily change the number of wiggles and adjust the max distance he travels (change x and y in tweens). Also check out random swarm which was accomplished using the same basic technique
  3. 6 likes
    @blaasvaer I would definitely suggest coming back to GSAP when your mind is fresh. Let's be fair, we've all done this... Find something amazing, want to integrate it ASAP, and can get discouraged due to a whole slew of reasons (deadlines, frustrations, that horrible thai food you ordered last night) and fall back to our roots. (jQuery in this case... don't lie people, we've all done this one!! though maybe no so much lately ) Anyway, IMO GSAP can be as simple or as complex as you make it. There's a lot that can be done; GSAP is powerful, but it can also be the simplest tool too. If there's any one thing I could recommend to a newcomer it would be to (and frankly this goes for any new software/framework) simply browse the API Docs. Not when you have a project to build, but when you have time to devote to learning a new technology. Again, we're all probably at fault there too... lol. Not trying to assume you haven't or won't do these things, just my two cents. FWIW, here's a very straightforward "width" based solution similar to what you described in jQuery. Though some assumptions were made, (e.g. it wasn't very clear if the nav should push content or if it should "overlay" like it was a hidden sidebar nav, I assumed the later) it should be easy to follow. Worth noting though is that animating width isn't the best we can do in regard to performance. Take a look at how @OSUblake takes advantage of transforms to accomplish a nearly identical effect in this codepen: Also, another great part of GSAP.... you're in it right now. So many of these guys have helped me learn a lot about GSAP.
  4. 5 likes
    Hello Robert Wildling Im not near my computer but ... onCompleteParams only accepts an array that passes the parameters to your onComplete callback function. Taken from the Tweenmax Docs: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/ onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example,TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like:onCompleteParams:["{self}", "param2"] Also keep in mind that GSAP already uses document.querySelector() by default in its tween target behind the scenes. So you don't need to call document.querySelector() at all and should just pass the target as a string '.c-topic--singer' for your el property. TweenMax to() : https://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/ to() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). I hope this helps
  5. 5 likes
    Sure can ... just grab the string length and perform some operation on it to get your desired delay. Then assign that delay value to the delay property. Here's an example,
  6. 5 likes
    Looks like @mikel & @Shaun Gorneau have you pretty well covered on how to do this animation by adding some classes, but I thought I'd throw out another suggestion so you'll have some options. If you want to animate part of the array and it's sequential, loops are great for that type of work. Instead of using a stagger tween, you can loop through the part of the target array that you want to animate and use the variable from your loop count to create a delay for each tween. You could also use this method to create new tweens and add them to a master timeline. Here's a really basic example of how that works. Using this method, you wouldn't have to add a new class to your elements. As I mentioned though, the elements need to be sequential for this to be a good option. I find the majority of my SVG animation work really involves asset prep and planning. If you've got elements semantically ID'd , in the right order and grouped correctly coming out of your vector software, the actual tweening is much easier. Hopefully that helps a little bit. Happy tweening.
  7. 5 likes
    Something like this would work Edit: Just as mikel suggested ... I put a class on the green lines that should be "on" via the staggerTo.
  8. 5 likes
    I think something like this could work for you. Note ... I had to reorder your polygons in the DOM so that they would animate in order.
  9. 5 likes
    Here's a menu I helped somebody out with last week. It's different than yours, but may give you an idea of how to structure things. When it comes to making interactive stuff, here's what I would recommend. Don't bother trying to make a master timeline as it probably won't work correctly. Use separate animations. Break your code down into distinct objects or functions. For jQuery, using .map() works great. Toggling/checking for CSS classes is slow and pointless if using objects. Sibling objects should not control each other. A parent object or function should do this. In the demo, notice how the click events are handled by calling a parent function, onSectionClick, which figures out what animations should play and be reversed.
  10. 5 likes
    Lerp it! This is what drives most animations and graphics, linear interpolation. function lerp(start, end, progress) { return start + (end - start) * progress; } All it does is find a value in a range based on a percent. If you're moving from 0 to 300 and you're 50% the way through, how far along are you? var x = 300 * 0.5; // 150 What if you started at 50 instead of 0? var x = 50 + (300 - 50) * 0.5; // 175 You've probably written a lerp function without even knowing it. Random returns a value between 0-1, so it's just like a percent. function random(min, max) { return min + (max - min) * Math.random(); } However, lerp isn't too exciting on it's own. After all, it's the same thing as a linear ease. But we can make it exciting. Lerp a target value with the same progress to create a natural looking ease out animation. You can do the same thing for your scrolling animation. You just need some value to chase after. Really simple example using the modifiers plugin. Watch as the pink circle chases after the blue circle. And for more ideas on how you can use lerp, check out my ModfiersPlugin collection. Almost every demo uses it in one way or another. http://codepen.io/collection/AWxOyk/
  11. 5 likes
    Hoo Crappin Ray! Amazing what 5 hours of sleep (and a couple of nice people in this forum – you know who you are), after 18 hours of work, can do. Thanks guys, you saved my faith in GSAP (well, it didn't really go away – frustration just took over for a while). This seem like a nice place : )
  12. 5 likes
    Hi @JaviTubert Welcome to the forums and thank you for joining Club GreenSock. To make that whole animation responsive, all you need to do is put the animating circle inside the same SVG as the motion path. That way the whole SVG scales together. Here's a fork of your pen. Hopefully that helps. Happy tweening and welcome aboard.
  13. 5 likes
    Hi, I was passing by to se the new features in the forums and ran into this post and I thought I'd offer some tips about using GSAP and React. First the following is a big NO-NO: Never use regular selectors while working with React. This because the component could get an update later and re-render. In this case the id(s) could change or even a DOM node with a specific ID could not be render again, then you get the can't tween a null target error. This goes to master Doyle as well, but we'll forgive his sins because He has given us GSAP . To get a specific element just use this.refs, that points to the node being rendered in the DOM. Second, you added almost 300 lines of SVG code on the component's render method, try to avoid this in order to keep your components small, clean, easy to read/debug/maintain and reusable, which are the cornerstone of component-based development, not only with React, but also with Angular2/4+, Vue, etc. If you can break your svg into smaller component it'll be very easy, remember: "Divide and Conquer" Finally is not necessary to use the bracket notation on JSX. Keep in mind that the component's reference is an object, so you can pass an string to it and React will look for that ref attribute on the code and pass whatever string to the object: render(){ return <div ref="myDiv"></div>; } // Then React does this (this is very simplified of course component.refs["myDiv"] = nodeObject; // So you can access your node this.refs.myDiv; So a real GSAP code could be like this: componentDidMount(){ const target = this.refs.targetGroup; TweenLite.to(target, 1, {}); } render(){ return( <svg xmlns="http://www.w3.org/2000/svg" id="svg2" version="1.1" viewBox="0 -10 573 367" height="367px" width="573px"> <g ref='targetGroup'> // svg code or component here </g> </svg> ); } As for the attribute plugin part, Jack has that already working so no need to go into that. Happy Tweening!!
  14. 4 likes
    Hi @blaasvaer I don't know if you typed that code snippet or it's a copy and paste from your actual project, but there are typos in two tweens. You're missing a closing quote mark for the tween targets and a comma between the target and the duration. //this TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 0, ease: Power0.easeNone } ); // should be this TweenMax.to('.logo span.one, .logo span.three', duration, { opacity: 0, ease: Power0.easeNone } ); The same typo is present on the span one and span three tween in the else statement. I'm not sure if that is the problem without seeing the actual working code though. As @mikel mentioned, a CodePen would be most helpful. Happy tweening.
  15. 4 likes
    Hello .. I believe the issue is that you are using a base64 data:image uri. That type of image has very poor performance when animating, especially on mobile when the load event is fired on the image. Base64 images are good for mobile for static one time use images, but not for animating. You should try and replace your jetpack dude with an actual image gif, png, or jpeg. And you will see better performance. GSAP default for force3D is "auto". And your element does indeed use no 3D transforms and is using matrix(), not matrix3d(). So force3D is not the problem, since it is doing what you asked, to be false. See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ force3D As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance. Happy Tweening
  16. 4 likes
    My guess is that it would be better to create the artwork at the size you need instead of scaling it up. It appears your dude starts pretty small. If you are going for a "big chunky pixels" look I'm doubtful you will notice any blurring of anything while the images are moving, especially in the erratic fashion you are going for with the jetpack
  17. 4 likes
    Welcome to the forums & GSAP, @manny2003! I think you'll like it around here. By default, GSAP always applies transforms to the "transform" attribute of SVG elements because: That's what the SVG spec calls for They're more predictable and reliable across browsers. There are various quirks when transforms are applied via CSS styles in Safari, Chrome, Firefox, and Edge (different problems with each). We originally applied things to CSS by default and then later switched to the "transform" attribute in order to normalize behavior and conform with the spec. The main problem you're facing in that situation is that you end up with competing sources of truth. In other words, if the CSS has one value, and the transform attribute has a completely different value, which should the browser render? Some browsers prioritize CSS, while others prioritize the transform attribute. Yuck, I know. That's one of the reasons we always recommend setting values via GSAP whenever possible. Specifically: It works around browser bugs It allows GSAP to cache the values to improve speed It ensures rotational accuracy, especially beyond 360 degrees. GSAP can parse existing CSS that's applied to an element (it must do this to record starting values), but the browser always reports computed styles as matrix() or matrix3d() in which rotational values can get very muddy and it's actually impossible to decompose in a way that always discerns the original components. For example, rotations of 0, 360, and 720 would all result in the same matrix. When you mix in 3D stuff, it gets way more complex, like a rotationY of 180 would be the same as a scaleX of -1. In fact, there are infinite options and ways to decompose the values, and they often don't really match what went in originally. So when you set the via GSAP, they get locked in, cached, and always remembered so that it's perfectly accurate every time. No messing with decomposition, parsing a string of 16 values and trying to pull out the data, etc. Does that clarify things? Technically, in browsers that support it, you could set CSSPlugin.useSVGTransformAttr = false to tell GSAP to use CSS instead but it's not really something I'd generally recommend. We place a high priority on browser consistency and when it comes to SVG, CSS transforms aren't entirely reliable in my experience.
  18. 4 likes
    Hi @rgfx That's what I would expect. The playhead is at the 0 position when you log it. Are you possibly thinking of duration? The duration of that timeline would be 2. duration() is a getter/setter for the timeline duration: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/duration/ time() or totalTime() are getters/setters for the playhead position https://greensock.com/docs/#/HTML5/GSAP/Core/SimpleTimeline/totalTime/ Hopefully that helps. Happy tweening.
  19. 4 likes
    The onComplete callback functions are setup so that this inside the callback refers to the tween that called the function. So knowing that you can do this.target to get the element that was being tweened. Also you can pass in the special string "{self}" in your onCompleteParams, but Its easier just to use this in the function. Both methods are illustrated in the resetText function below (open the pen in a new window and view console).
  20. 4 likes
    How to create a scroll driven animation seems like a much different question than what you were originally asking. The easiest way to go about this is to learn ScrollMagic which is a very robust api for controlling GSAP animations via scroll. http://scrollmagic.io/examples/ Check out Petr Tichy's ScrollMagic resources: https://ihatetomatoes.net/?s=scrollmagic&post_type=post&ref=5 Blake has posted often about controlling animations via scroll without ScrollMagic so you could try to re-engineer some of these to suit your needs: and be sure to read this post where Blake talks all about normalize, lerp and clamp and there are a bunch of great videos to watch too.
  21. 4 likes
    I'd look at using stagger for something like that with a .01 offset (instead of the delays you currently have). I don't have time to fork your pen at the moment, but here's some info on stagger. https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/ With stagger, you can do that whole animation with one tween. Happy tweening.
  22. 4 likes
    Hi In your case just sc2 stroke:#10667A; sc19 stroke: #5D5D5D; Or follow the advice of PointC Best regards Manfred
  23. 4 likes
    That can sometimes happen. That's the Wild West of SVG. If you have paths in an illustration that are next to each other, styled exactly the same and don't need to animate separately, I'd recommend merging them in Illustrator before export. If you use the Pathfinder tool, you can merge, unite, intersect etc... The simpler you can make an SVG, the easier it will be to manage. That's my two cents worth. Others may have additional advice. Happy tweening.
  24. 4 likes
    Hi @Semblance Looks like you're getting pretty close to what you want. When you have some action that is going to happen over and over, you can make the code do the heavy lifting by using a loop. In your demo, we can loop through each of the tulip groups and create the animation for that group. That timeline is then added to a master which is repeated as much as you like. I used a variable for the duration and the position of each timeline on the master so you can adjust those to your liking. I'm not sure if this fork of your demo is exactly what you wanted, but it should get you started. Regarding your question about the 0 at the end, that is the position parameter. As @mikel mentioned, you can read more about that here: https://greensock.com/position-parameter Hopefully that helps. Happy tweening.
  25. 4 likes
    Hi @geddski Please ignore @Carl 's overly complicated and confusing demo. Not sure what he was thinking. This should make more sense If you don't get the reference, then you might need to brush up on your flexbox skills. It's free.
  26. 4 likes
    Hi @c_larindesigns Welcome to the forum. As @Carl mentioned, there is a whole lot going on with the code so it's hard for us to troubleshoot. A reduced demo would be most helpful. That being said, I took a quick look at the code and I see some timelines getting played and then reversed, but others only look like they get played. You mentioned things look right the first time, but don't play after that. I'm wondering if you're trying to play() a timeline that has already been played? Have you tried something like restart() or play(0)? I'm just guessing here, but it would be easy for you to try it. Happy tweening.
  27. 4 likes
    What's MAJA? You can change the speed of your path follower by tweening the timeScale of its animation. Or do this...
  28. 4 likes
    Hi @Joseph Levin Welcome to the forum. Looks like I'm late to the party and many of the GreenSock Greats have already answered, but I'll throw my two cent demo into the mix. Though, with all the geniuses already present in this thread, my two cent demo may only be worth a penny. Happy tweening and welcome aboard.
  29. 4 likes
    There's no magic going on. You're just losing track of the index because of this. currSlideIndex++; Keeping track of stuff that can be cycled in any direction can be tricky. For something like this, I like to use a circular linked list instead of an array. A linked list is just a collection of objects that point to the object before and after it. var obj1 = { prev: obj3, next: obj2, data: "foo" }; var obj2 = { prev: obj1, next: obj3, data: "bar" }; var obj3 = { prev: obj2, next: obj1, data: "baz" }; So if you were working with obj1, and wanted to get the data from obj3, you could do this. var data = obj1.prev.data; // "baz" Likewise, if you were working with obj3, and wanted to get the data from obj1, you could do this as it's circular. var data = obj3.next.data; // "foo" That circular structure could really simplify your demo. You only need to keep track of 1 slide. When there is left of right swipe, you just get the prev or next slide from the current slide. There's nothing else to track or update.
  30. 4 likes
    Hello The only way to find a solution is to look in your web inspector in the network tab JS selected. And see the order of the scripts loading, making sure it loads all the GSAP scripts with your custom GSAP JS loading last.. after all GSAP JS like TweenMax and DrawSVG. If you don't see them in the proper order that means your custom code might be running before GSAP code is loaded. Or the DOM (svg) isn't ready or loaded for the code to execute on. When I look in the browser inspector on your site, I see the order of GSAP and Custom scripts like this: ScrollToPlugin.min.js greensock.js TweenLite.min.js custom.js TweenMax.min.js DrawSVGPlugin.min.js So as you can see your custom.js is loading before TweenMax.min.js and DrawSVGPlugin.min.js, that's why it doesn't animate. Also you don't need to load TweenLite.min.js since your loading TweenMax.min.js which includes TweenLite. You need to adjust that with the WordPress API methods .. like the add_action() method to change the priority of the order of enqueued scripts: http://codex.wordpress.org/Function_Reference/add_action And my StackOverflow answer regarding this: http://stackoverflow.com/questions/19913960/enqueue-wordpress-plugin-scripts-below-all-other-js/19914138#19914138
  31. 4 likes
    Look at the function I posted in your other thread. That is what tweening is based on. Although a tween might have an extra parameter, which you would divide to get the progress. // t: current time, b: beginning value, c: change in value, d: duration function linearTween(t, b, c, d) { return b + c * t / d; } function lerp(start, end, progress) { return start + (end - start) * progress; } So there has to be a definite start and end. And we can't assume 0 to be the initial value. If there is no initial value, what you're trying to target might not even exists. That happens to be case for a lot SVG attributes. Some properties and behaviors do not get initialized until an attribute is actually placed on the element. And I really can't think of too many things that I would actually tween to or from 0. Opacity, x, y, and rotation are the only ones that I can think of at the moment. And the border tween works because there is a border color. It's yellow. GSAP looks at the computed style for values to tween from/to.
  32. 4 likes
    Hi @foxhound3311 You just need a mask for the group of screen elements. Here's a fork of your pen. Masks are quite helpful when animating elements in an SVG. Here is a pen with the basic mechanics: Hopefully that helps. Happy tweening.
  33. 4 likes
    thanks for the demo. Once you start pushing a few hundred divs around the browser is probably going to have some trouble. Seems dangerous to let a user create 300 new particles on mouseover (or maybe that was just for the demo). I thought I noticed the effect slightly faster without the rotation and scale applied, but that advantage appeared to go away once 900 or so were animating. For something like this, you can't beat canvas and Blake's snow demo is the perfect example. http://codepen.io/osublake/full/BjNZYP/ That's 12,000 particles but I'm sure it can handle more. also:
  34. 4 likes
    Just paste the url and whammo! it's there. I wanted to celebrate this feature with Craig's awesome SVG Wars
  35. 4 likes
    GSAP doesn't use jQuery, and it doesn't need to be imported, bundled, transpiled, or any other build process. It's just a regular JavaScript file that works out of the box. But since you brought up jQuery, maybe that's the problem. You said it was an old file, and there have been a lot of breaking changes between v1, v2, and v3. Can you post the files, and we can take a look?
  36. 4 likes
    Kind of off topic, but you brought up the prototype, and I wanted to show you something that you will probably like. I really liked your idea in this thread about using false or "none" for a linear ease because it is annoying having to specify that considering the engine is already doing that. And around that time, somebody asked about having a default ease for a timeline in this thread, which I thought was a good idea. So I wanted to see how hard it would be to implement both of those features. I took me about 5 minutes to get it working. All I had to do was override/intercept the animation methods on the timeline prototype, and inject an ease into the tween before gsap gets a hold of it. That might sound complicated, but it's really easy to do. For reference, the vars object you pass into a tween, timeline, draggable, etc, gets added to the instance itself, so you can always access it whenever you want. And as long as it is not a reserved keyword that GSAP uses, you can add whatever you want to it. So adding a default ease to a timeline is just a matter of passing one in. var tl = new TimelineMax({ defaultEase: "foo" }) console.log(tl.vars.defaultEase); // => "foo" Now we need to inject that ease into any animations that don't have an ease defined. To do this, we can override a timeline method with our own. We of course don't want to override everything, so we'll save the original method in a variable. // Save original method var originalTo = TimelineLite.prototype.to; // Now override it with our own method, and call the original inside of it TimelineLite.prototype.to = function(target, duration, vars, position) { // Now we can do stuff before the original method gets called // I'm in your base, killing your d00ds return originalTo.call(this, target, duration, vars, position); }; Now we need to check if there is an ease on the vars object being passed in. If there is an ease on the object that is equal to false or "none", we will a add linear ease to the vars object. If there isn't an ease on the vars object and the timeline has a default ease, we will add the default ease to the vars object. TimelineLite.prototype.to = function(target, duration, vars, position) { var currentEase = vars.ease; var defaultEase = this.vars.defaultEase; if (currentEase === false || currentEase === "none") { vars.ease = Linear.easeNone; } else if (!currentEase && defaultEase) { vars.ease = defaultEase; } return originalTo.call(this, target, duration, vars, position); }; And that's it! You just unlocked the Prototype Overrider achievement and gained 500XP.
  37. 4 likes
    Why don't you use flexbox? This will center its children! .container { display: flex; align-items: center; justify-content: center; } And it scales real nice. More flexbox, animated for your viewing pleasure. If layout is such an issue, write some functions and reuse them with all your projects. Figuring out corner and center positions is real easy. // Top Left x = 0; y = 0; // Top Right x = parentWidth - elementWidth; y = 0; // Bottom Right x = parentWidth - elementWidth; y = parentHeight - elementHeight; // Bottom Left x = 0; y = parentHeight - elementHeight; // Center x = parentWidth / 2- elementWidth / 2; y = parentHeight / 2 - elementHeight / 2; You can even parameterize your functions.
  38. 4 likes
    You don't need to use Draggable for scrolling with touch monitors. Scrolling should work just like your phone. IE and Edge probably provide the best user experience in this regard, and have a built-in overscrolling effect. And yes, youMightNotNeedScrollMagicIfYouUseGSAP Really simple. Say you want an animation to start at 2000px for a duration of 500px. This is all you need to do. var tl = new TimelineMax({ paused: true }) .to(".foo", 500, { x: 100 }, 2000); // And then in a scroll event handler function onScroll() { tl.time(window.pageYOffset); } That's it!
  39. 4 likes
    That's because your .box has a height of 400px. Once you put absolute positioning on it, it's removed from the DOM order and its parent, which has no height, becomes a height of 0. Putting a height on .animation (of 400px) solves that issue.
  40. 3 likes
    You can listen for a popstate event... window.addEventListener("popstate", function(event) { // handle change }); But animating page transitions can be a little more complicated than that article lets on. There's a lot of factors involved, and it might be better to use a library designed to handle routing. For really simple routing, you might want to check out smoothstate.js. I've never used it, and it doesn't look like the project has been updated recently, but I remember seeing this thread on how to use it with GSAP. Anything more complicated than that, and you'll probably need to look into using a SPA framework. Here's a really simple routing example using AngularJS. http://embed.plnkr.co/UOp1ZD/
  41. 3 likes
    That's because you created conflicting/overlapping tweens of the same property of the same object. In other words, your first staggerTo() is moving xPercent to certain values, but then before those animations are done, you've got another staggerTo() that's trying to push xPercent to a completely different value, so the auto-overwriting feature kicks in and kills the first tween(s) when the second starts. That's expected behavior. I'd recommend against creating conflicting tweens. Or, you could set overwrite:false on the 2nd staggerTo() stuff, but that just tells GSAP to let the conflicts occur (two tweens fighting for control of the same properties). See what I mean?
  42. 3 likes
    Flexbox? What dark wizardry do you bring here. Be gone conjurer of cheap tricks.
  43. 3 likes
    Okay, I've implemented this feature in the upcoming release of Draggable which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). You can optionally set allowContextMenu:true (it's false by default). Better?
  44. 3 likes
    Thanks for the demo. it appears that since you are not defining a max-width in your css there is no starting value for the tween. The browser does not report a max-width if you do not set one so GSAP has no way of knowing what value you are tweening from. Something like this may do what you want:
  45. 3 likes
    That's the svg block trainer. The fighter jet is kept safely inside the pixi hanger, and only comes for special events, like right now...
  46. 3 likes
    Hi, It is very smart of you to create functions to do repetitive tasks for you! As you probably noticed, the animations you are creating are not really added to a timeline. You are using a timeline to schedule the calling of functions that create some animations. The trick here is you want your functions to create timelines and then return them. Here is a very basic example that shows how you add timelines that are created by a function to a master timeline: var master = new TimelineLite(); function moveObject(selector, amount){ var tl = new TimelineLite() tl.to(selector, 1, {y:amount}) .to(selector, 1, {x:amount}) return tl; } //add to the master timeline whatever the moveObject() function returns master.add(moveObject(".green", 50)) master.add(moveObject(".orange", 100), "+=1") PointC uses this technique to make this amazing animation that has a bunch of nested timelines here:
  47. 3 likes
    Hi, You can easily pause a timeline by using .addPause() https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/addPause/ To jump to next label, use: var nextLabel = getLabelAfter() tl.tweenTo(nextLabel) https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelAfter/ https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenTo/ Hope this helps.
  48. 3 likes
    Width is not a transform, nor is it a CSS property on a rect. You have a couple options here. You can set it's width to whatever you want, set scaleX to 0, and then animate scaleX to 1. Or you can set it's x attribute to the middle, animate its width to whatever you want, and counteract that by animating it's x attribute to 0. Not sure what you're trying to do with triangles though.
  49. 3 likes
    Sorry about any confusion/frustration. This is pretty unusual for us to hear this type of thing - most of the time, folks tell us that the more they use GSAP, the more they fall in love. I feel badly that you were disappointed. If it helps, I think you were looking for something like this: Does that make sense? And like @PointC said, it's usually best to simply use autoAlpha instead of opacity plus display. In other words, if you just animate to autoAlpha:1, it'll make opacity go to 1 and visibility will be toggled to "inherit", and if you animate to autoAlpha:0, it'll go to opacity:0 and visibility:hidden at the end.
  50. 3 likes
    You have problems with your timeline labels... var alsoAnimation = new TimelineMax({repeat:-1}) .to('.also-01', dur, {backgroundPosition: -SpriteWidth+'px', ease:SteppedEase.config(totalFrames)}, "sprite1") .set('.also-01', {display: "none"}, "sprite1") You're setting it to display: "none" at the same time you are trying to animate it. Get rid of them and you should be good. And here's a good thread about sprite sheets.