Greensock and Hype pro (3D render)

[Zhur]

Hi everybody,

 

I used to work with Greensock API inside Flash (swf), Edge Animate, and, now, in Hype Pro since Edge has been abandonned by Adobe this year.

I try to extend Hype features with a GSAP Tweenmax API. But, I cannot obtain 3D real perspective with imbricated symbols. I could get this inside Edge. Why is there a problem with Hype Pro ?

 

I send you the Hype pro file to check it.

Thanks for your help.

I wrote this code :

 

 

CSSPlugin.defaultTransformPerspective=700;

 

var wall = document.getElementById("wall");

TweenMax.set(wall,{rotationY:45, transformPerspective:200, transformStyle:"preserve-3d", force3D:true});

TweenMax.to(wall,4,{rotationX:180});

 

TweenMax.to(".square",4,{rotationY:720});

 

 

 

 

imbrication3D.hype.zip

[Jonathan]

Hello Zhur, and Welcome to the GreenSock forum!

Thank you for the zip.. But i have never heard of Hype Pro.

 

It can be a number of things. I don't know what your animating, since i cant see your HTML. But if you are animating SVG. SVG does not support CSS 3D transforms.

 

To make this easier for us to to help you. Is there a way you can make a simplified demo example in codepen. This way we can see your html, css so we can see in context.

 

 

Thanks

[Carl]

Sorry, we really don't have any experience with Hype Pro.

 

It would really help if you could provide a very simple demo with a single element that you are trying to rotate in 3D space. Send this as a zip with all the CSS, JS and HTML needed to run the demo. Like Jonathan noted, seeing the output from hype in a format we can edit will be a great help.

 

I also suggest that you create another demo without using any GreenSock code at all. Try to do the rotation using only CSS. Don't even worry about animation just try to set some 3D properties. If this fails, send the demo to the Hype people. 

 

At the end of the day all GSAP does is update CSS styles for you. If there is something in Hype Pro that is overriding this I'm not sure what we can do. 

 

We have seen positive reviews of people using GSAP + Hype and this is (from my recollection) the first support request we have seen regarding any problems.

[Zhur]

Great, guys. I am trying to publishing something for you. Thanks.

In Hype Pro, it looks like as if they put a force3D turned false for every elements it contains. Is it possible to force it to true even if it was coded false at first ?

[Zhur]

Sorry, I cannot include all the Hype assets in a free codepen, so I put it on my host.

Is a zip file enough for you to check this ?

Tell me if it isn't.

 

Thank you very much.

 

The zip that contains the HTML page and an assets folder.

http://www.swipe-et-swipe.fr/gsap/Archive.zip

 

This is the original Hype file :

http://www.swipe-et-swipe.fr/gsap/imbrication3D.hype.zip

 

A demo page at :

http://www.swipe-et-swipe.fr/gsap/imbrication3D.html

Here, only the first square seems to get the transformStyle property.

 

The GSAP code inside the document :

CSSPlugin.defaultTransformPerspective=900;

var wall = document.getElementById("wall");
var square1 = document.getElementById("p1");
var square2 = document.getElementById("p2");
var square3 = document.getElementById("p3");
var square4 = document.getElementById("p4");
var square5 = document.getElementById("p5");
var square6 = document.getElementById("p6");

// settings
TweenMax.set(wall,{rotationY:45, transformStyle:"preserve-3d"});
// tweens
TweenMax.to(wall,16,{rotationX:1440});
TweenMax.to([p1,p3,p5],4,{rotationY:720, z:200});
TweenMax.to([p2,p4,p6],4,{z:-200});

[Carl]

Thanks for jumping through all the hoops of providing the demos. 

Definitely helpful, but I'm a bit stumped at what is happening.

 

It takes some time just to decipher the code and figure out what it is we are supposed to be looking for.

I found the live demo to be the best

 

From what I gather the issue can be boiled down to "Why doesn't the element #p3 animate the same way that #p1 does".

In case anyone cares to take a look into this, here is the DOM structure:

http://prntscr.com/chc3jw

 

When you view the demo here: http://www.swipe-et-swipe.fr/gsap/imbrication3D.html #p1 is the tile that appears to be spinning around on its own independent axis whereas all the others spin according only to what the #wall is doing.

According to the tween code:

TweenMax.to([p1,p3,p5],4,{rotationY:720, z:200});

p3 and p5 should be acting the same way as p1

 

From what I could tell the DOM structure and styles for all looked the same. I'm a bit puzzled.

 

 

 

Zhur, Is there any chance you can set all the tweens to repeat:-1? I found that by the time I dug into the web inspector to find the DOM elements most of the animation had ended.

[Zhur]

Hi, thank you for your help. I'm going to follow your suggestion.

This is a response from Hype staf.

It can help us to manage our code.

Then, how can I put an important! attribute inside the GSAP CSS coding ?

 

 

The issue comes about because Hype itself has a 3D rotation feature. To support this, we do several things such as setting those properties and containing elements within a container to properly deal with perspective and intersections.

 

Assuming Hype's built-in 3D rotations and animations don't meet your needs, there's a few things you could do as a workaround:

 

- Define the elements within the Inner HTML of a Box element in Hype. This means they wouldn't be managed by Hype and then should work okay. This is recommended.

- Instead of Greensock's CSS setting, you may be able to use !important directives to set the CSS you want, although this may be tricky with the fact that Hype puts containers around the DOM elements. It isn't really supported, but might be an option.

[Jonathan]

Regarding the CSS !important directive. There is no !important attribute. !important is only to be used as a last resort, and only placed inside a stylesheet or style element. It should never be used on or in a style attribute. If !important is used inline in the style attribute it defeats the purpose, since it is only used to override inline styles when used in an external stylesheet or style element. Using !important will make the value static so you can't animate a CSS property with !important.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

I'm just confused on the benefit of using Hype instead of just using HTML and CSS since the final output is HTML and CSS.I f it weree I would use GSAP for CSS transforms since it resolves more issues and bugs than any other web animation platform.

 

Also when setting perspective, I would just set transformPerspective on your tween instead of as a default. Also keep in mind some browser bugs might due better with just using perspective property on the parent. If the perspective function inside a transform property is giving issues. Depending on what your doing you might have to test both to see which gives you the desired result since WebKit based browsers are buggy when it comes to CSS perspective property and the CSS transform perspective function.

 

But that's just my two cents