Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
knalle

SVG isometric cube (SSR style) problem

Recommended Posts

I need to be able to tween the size of a cube on all three axis (pseudo).

But when the properties overlap (as seen in the last part of the animation) it breaks. Of course :)

 

But what would be a better an more intuitive way of setting this up? Also, scaling "across" 0  (eg. sizeX(5) to sizeX(-5) ) is not working unless i use onUpdate or something and check for the value.

 

Ideally, I would like the size tweening working as great as regular 3d scale (X, Y, Z) and the isometric pseudo-3d position of the cube be working like x,y,z.  

See the Pen KKKwJWN by knalle (@knalle) on CodePen

Share this post


Link to post
Share on other sites

Hey knalle,

 

Here's a faster response (without a demo): To do this sort of thing you should probably use a proxy object or objects (maybe something like var sizing = {xScale: 1, yScale: 1, zScale: 1};) and then run a function on a GSAP ticker to update the scaling in one tween so that there's no conflict. 

  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks! I was thinking about objects too. Is the ticker the right approach if i have 5-10 cubes animating? 

Share this post


Link to post
Share on other sites
23 minutes ago, knalle said:

Is the ticker the right approach if i have 5-10 cubes animating?

Well, you didn't mention that ;) 

 

It should be able to be done that way without a noticeable performance impact but it may not be the optimal way. Why are you using pseudo-3D as opposed to WebGL anyway? This sort of thing is easily done in WebGL. 

 

Maybe it'd help if you described your end goal more, as your code is a little murky to figure out exactly what you're trying to do.

Share this post


Link to post
Share on other sites

You are right, Zach. I could describe it a bit better 😊

The webGL would outperform this approach I am sure. But I will need this code for display banners primarily. So take up only few kb is a requirement. Perhaps I’ll be animating only 3-5 cubes. So it will probably perform ok. 

Share this post


Link to post
Share on other sites

What is SSR?

 

I would just animate the points of some polygons for this. Some info about isometric and how diametric is easier to work with.

 

 

 

See how this demo works. It's moving tiles, but instead of moving tiles, it could be moving points of a polygon.

 

See the Pen QGGreb by osublake (@osublake) on CodePen

 

 

I might make a demo later tonight. I like isometric type questions. 

 

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, OSUblake said:

I would just animate the points of some polygons for this.

 

Super simple.

 

var svg = document.querySelector("#svg");
var polygon = document.querySelector("#polygon");

// Create and add points to the polygon
var point1 = polygon.points.appendItem(svg.createSVGPoint());
var point2 = polygon.points.appendItem(svg.createSVGPoint());
var point3 = polygon.points.appendItem(svg.createSVGPoint());
var point4 = polygon.points.appendItem(svg.createSVGPoint());

// Now animate it. That's it!
var tl = new TimelineMax()
  .to(point1, 1, { x: 50, y: 10 }, 0)
  .to(point2, 1, { x: 90, y: 90 }, 0.5)
  .to(point3, 1, { x: 10, y: 90 }, 1)
  .to(point4, 1, { x: 20, y: 30 }, 1.5)

 

See the Pen 257de52aaa703757eec0fe9b92292c1a by osublake (@osublake) on CodePen

 

 

  • Like 3

Share this post


Link to post
Share on other sites
8 hours ago, OSUblake said:

What is SSR?

 

I would just animate the points of some polygons for this. Some info about isometric and how diametric is easier to work with.

 

 

 

See how this demo works. It's moving tiles, but instead of moving tiles, it could be moving points of a polygon.

 

 

 

 

 

I might make a demo later tonight. I like isometric type questions. 

 

SSR = Scale, Skew, Rotate (https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058)
I just thought it would be easier to wrap my head around the translations of a square that has been transformed than moving the points on an angle. but performance is probably better in your without the transformations in SSR approach (?)

  • Like 1

Share this post


Link to post
Share on other sites
2 hours ago, knalle said:

 

Very interesting tutorial!

 

2 hours ago, knalle said:

I just thought it would be easier to wrap my head around the translations of a square that has been transformed than moving the points on an angle. but performance is probably better in your without the transformations in SSR approach (?)

 

It's hard to say, but I'd guess they'd be about the same since SVG transforms aren't hardware accelerated in most browsers.

 

Here's what I came up with. You can control the start and end points for the x, y, and z axis. It's not true isometric, so the z axis might look a little squished if it's set to 1. 

 

See the Pen JjjdJGz by osublake (@osublake) on CodePen

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

A lot of the concepts used in that demo are based on this this video. 

 

 

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
5 hours ago, OSUblake said:

 

Very interesting tutorial!

 

 

It's hard to say, but I'd guess they'd be about the same since SVG transforms aren't hardware accelerated in most browsers.

 

Here's what I came up with. You can control the start and end points for the x, y, and z axis. It's not true isometric, so the z axis might look a little squished if it's set to 1. 

 

 

 

 

 

Great example - why is it squished at 1? also it clips a bit when z is 0.

By the way, those coding math videos are excellent. Easy to follow :) 

Share this post


Link to post
Share on other sites
1 hour ago, knalle said:

Great example - why is it squished at 1?

 

Because the angle isn't as steep as it is in true isometric, 116.565 degrees vs 120 degrees. That video talks about the difference starting at around 1:30.

 

1 hour ago, knalle said:

also it clips a bit when z is 0.

 

A quick fork that allows you adjust the values. I'm not sure I'm not seeing that when I set z1 and z2 to the same value. Do you mean that it should be hidden when z is 0? And what browser are you seeing that in?

 

See the Pen 44a86e5c54ec6d6ad0c85cfe50f4fcf2 by osublake (@osublake) on CodePen

 

 

  • Like 2

Share this post


Link to post
Share on other sites
42 minutes ago, knalle said:

I have made a isometric (not dimetric) pen based on your pen.  I hope the math is right :)

 

Hey, that looks good! 😀

 

I was actually going to make another version that was true isometric, but you beat me to it. Although, I was going to try a different approach. Instead of messing around with trig, I was going to use vectors, kind of like here.

 

 

But what have should be fine, so I probably wouldn't worry about. 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×