[Pixi.js objects... support rotationX and rotationY?]

Bummer! Thanks, Jack!

[Pixi.js objects... support rotationX and rotationY?]

It seems like I can animate a pixi.js object in just about every way I can with regular DOM objects except for rotationX and rotationY. I didn't see anything in the documentation about these properties. Is this supported?

[GSAP version specifically for latest Chrome builds for nwjs and Electron?]

I plan to distribute my HTML5 game as a nwjs app and I am using GSAP for all of my animations. I was wondering how much performance would be improved if there was a GSAP version that only targeted the latest Chrome builds for people using nwjs or Electron. Is this worth it? Would it noticeably enhance animation performance due to skipping all feature and version detection? This was just something I was thinking about and I was curious if it was on your (Jack, Carl) radar.

[SteppedEase - easing between between frames?]

That's a good idea, Blake. You could use division to round down to the nearest hundred to set the backgroundPosition.

[SteppedEase - easing between between frames?]

Haven't messed with that before. Here's how I'm currently solving my problem... I'm using a few delayed sets that transition into a SteppedEase. This works, but I'll look into CustomEase, too.
 

tl.set(test.mob.element, {
  overwrite: 1,
  backgroundPosition: '0% -300%'
}).set(test.mob.element, {
  backgroundPosition: '-100% -300%'
}, '+=.13')
  .set(test.mob.element, {
  backgroundPosition: '-200% -300%'
}, '+=.12')
  .set(test.mob.element, {
  backgroundPosition: '-300% -300%'
}, '+=.11')
  .to(test.mob.element, .4, {
  startAt: {
    backgroundPosition: '-400% -300%'
  },
  backgroundPosition: '-900% -300%',
  ease: SteppedEase.config(5),
  onComplete: function(){
    var filters = {
      opacity: 'opacity(100%)',
      brightness: "brightness(100%)"
    };

    var tl = new TimelineMax({
      onUpdate: function(){
        test.filters.death(test.mob.element, filters);
      }
    });
    tl.to(filters, 1.5, {
      opacity: 'opacity(0%)',
      brightness: "brightness(0%)"
    });
  }
});

 

[SteppedEase - easing between between frames?]

SteppedEase is convenient for animating in a linear fashion between frames in a spritesheet, but what if I want an easing between each step? Is this possible? Let's say I want a monster to die and go through 10 frames of animation, but I don't want it to go through the frames in linear jumps. What if I'd like a Quad.easeOut through the steps for a more dramatic effect? Is that possible?

[Can we create a basic retro game using GSAP?]

Thanks, Warren. Note that when I developed those games, I was new to web development. I was not even a professional web developer, so someone with more experience should be able to make something much more polished. Those games were developed with a 4-digit budget.

[Can we create a basic retro game using GSAP?]

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.

[Developing a simple 3d environment using DOM only using GSAP]

Probably not as much as I should. Thanks, Blake.

[Developing a simple 3d environment using DOM only using GSAP]

I think my main concern is that I want it to perform well at 1920 x 1080, and I'm not sure canvas will be happy about that. I want players to be able to go full screen and use their whole monitor. I'll just have to experiment and find out how it performs.

[Developing a simple 3d environment using DOM only using GSAP]

Seems interesting. I might experiment with this a bit. The Outrun demo is impressive. I am just leery about over-engineering a solution when a simple one will do. I'm not really convinced that there's a robust 3D solution out there for browsers yet. Thanks!

[Developing a simple 3d environment using DOM only using GSAP]

Yeah, I don't need collision detection or anything fancy like that. Just something to indicate progress along a rail-like hallway system found in games like Darkest Dungeon.

[Developing a simple 3d environment using DOM only using GSAP]

This is perhaps not the best place for this question, but I know there's a lot of animation expertise in this forum. I generally don't want to use canvas due to its complexity and dev pain, so I am considering developing a simple pseudo 3d environment using GSAP. Think Phantasy Star 1 dungeon hallways, which was developed in 1987 on the Sega Master System. Can the DOM do something like this 30 years later? I don't need hills or anything complex like that. Just flat surfaces. Moving down hallways. Something suitable to a dungeon crawler RPG. The most complicated thing I would like is turning 90 degree corners. I think moving down a straight hallway wouldn't be too hard to develop. I think this could be done using either DOM or SVG...

 

I'm curious if anyone has any pointers, advice, or general guidance on creating something like this using GSAP. Regardless, I am going to attempt developing something like this. I'm just curious if others have tried something similar.

 

Sample video to get an idea what I have in mind:

 

 

[Animating multiple CSS filters?]

I just experimented with this tonight. In Chrome I was able to independently tween 1000 different 382x400 images using an infinite looping hue rotation. In Chrome it animated it flawlessly. I noticed that Firefox was choppier, but it still performed far beyond my expectations. I only expect to have 10 or 20 images on the screen, so it should perform very well on any modern desktop/browser combo.

[Animating multiple CSS filters?]

Kind of off-topic, but how much filtering can modern desktop browsers handle? Can I blur 2? 10? 20? 100 images? When would a desktop choke? This is something I will be experimenting with myself when I get the chance. I'm also curious about the performance compared to canvas.

[Animating multiple CSS filters?]

Perfect. This works perfectly! I was having a hard time getting the tween to actually work, but now it's working perfectly. Here's what I was using for folks that are interested:

 

TweenMax.to('#mainBG', 3, {
  startAt: {
    filter: 'invert(0%) grayscale(0%) brightness(100%) sepia(0%) saturate(100%) hue-rotate(0deg)'
  },
  filter: 'invert(100%) grayscale(100%) brightness(100%) sepia(100%) saturate(400%) hue-rotate(120deg)'
});

 

[Animating multiple CSS filters?]

I was having issues setting multiple CSS filters on an element. I wanted to create a colorization filter similar to what you'd see in GIMP or Photoshop. It seems like some filters don't play nicely with others. hue-rotate seems to be one culprit, among others:
 

TweenMax.set('#main-bg', {
  filter: 'invert(40%)',
  filter: 'greyscale(100%)',
  filter: 'brightness(40%)',
  filter: 'sepia(100%)',
  filter: 'saturate(400%)',
  filter: 'hue-rotate(-50deg)'
});

 

It wasn't colorizing the element red as I expected. Is this possible using GSAP or are there known issues with tweening multiple filters? Is my syntax wrong? Do I need to set it as one property as an object or something like that?

[Will there be a GSAP for Unity in the future?]

Bump for interest. Has anyone used GSAP in UnityScript? It seems like it would work, at least to some extent. I know some of the features probably wouldn't work, but I figure the basic tweening of object properties should work. We were thinking about developing a project in Unity at work, and we're still looking at options for how animation actually works.

[Tween a SVG path attribute]

Thank you, Carl! This is so amazing! I think it wasn't working because I was trying to use it as an attr property. I updated the codepen. It looks so much smoother now! Here's what I went with:

var arr = [
  document.getElementById('targetLine'),
  document.getElementById('targetLineShadow')
]
TweenMax.to(arr, .2, {
  strokeDashoffset: '-=12',
  repeat:-1, 
  ease:Linear.easeNone
})

[Tween a SVG path attribute]

Check it out, Carl. Here's what I'm talking about. It works with JavaScript, but I couldn't figure out how to do with with GSAP:

 

See the Pen zBzJkO by maelfyn (@maelfyn) on CodePen

[Tween a SVG path attribute]

Ah, thanks. It seems so simple now that you explain it. Thank you. Also, can you do a demo that animates stroke-dashoffset in combination with a stroke-dasharray like 8,4? I was trying to animate a targeting path in a Risk-like game I'm developing, but I couldn't figure out how to do it with GSAP. Oddly, I figured out how to animate it using plain javascript, but I'd prefer to use GSAP. I didn't find any good examples of this that actually worked.

 

Here's how I animated the dashed, offset line in javascript:

function animateLine(val){
	if (my.attackOn){
		DOM.targetLine.style.strokeDashoffset = --val;
		setTimeout(animateLine, 50, val);
	} else {
		DOM.targetLine.style.visibility = 'hidden';
	}
}

[SVG Gotchas!]

Animation/Workflow tip: Don’t forget - you can animate the viewBox attribute

I don’t see this technique in practice (or talked about) very much, but sometimes it may be a better solution than trying to scale elements and center them.

 

To illustrate this easy, but powerful method of SVG animation, I’ve made a simple house tour complete with some GreenSock home décor and a few nods to our great moderators. Take a look:

 

See the Pen OMabPa by PointC (@PointC) on CodePen

Love this viewbox technique. I want to use something like this for my game Firmament Wars. It's like Risk, so I'd have to focus on selected territories and stuff like that. Is there an easy way to determine the x y w h values for each path you want to focus on? Or does that have to be figured out and hardcoded one by one?

 

Edit: Nevermind, I just read the rest of your comment. So you basically use Inkscape/Illustrator to find the coordinates you need? Very smart. I was thinking about this and the thought of using 3D scaling didn't sit well with me. It would be so much trial and error to get the right positions.

[Problem with draggable behavior for a huge element inside a small container with Firefox]

Thanks a lot. You're a saint.

[Problem with draggable behavior for a huge element inside a small container with Firefox]

I was, but I turned them off while troubleshooting. I think I figured out what is causing my problem. It's my code that attempts to make the parent container "responsive" for various screen sizes:

e.style.marginTop = (-h / 2) + 'px';
e.style.marginLeft = (-w / 2) + 'px';
TweenMax.set("body", {
  left: "50%",
  top: "50%",
  opacity: 1,
  yPercent: -50,
  xPercent: -50,
  force3D: false
});

 

The yPercent and xPercent were causing my problems in Firefox. Gonna have to dink with this until life is perfect.

[Problem with draggable behavior for a huge element inside a small container with Firefox]

Appears to be working fine here. Must be something else in my code causing problems. 

See the Pen qZPgOg?editors=0100 by maelfyn (@maelfyn) on CodePen