[rotationX only see half image while rotating]

I tried moving the translate3D z around before, but just small numbers like 2 or 10.

A translate3D z of 80+ on the rotating object seems to do the trick. Or around -30 on the shape below it.

But the better solution for this particular banner was to just remove the color div below it that the object was sort of slicing through.

 

Thanks for the help. Here's to cool movements.

[rotationX only see half image while rotating]

Thanks for the response guys. Yes it works just fine in codepen. 

So the problem is when published from google web designer. 

In that case in Safari only, half the image is shown during rotation.

I've asked in their forums also with no luck yet.

 

Thanks!

[rotationX only see half image while rotating]

It's in my second post. Here it is again.

It's working here.

See the Pen wWXAJB by sirhclluk (@sirhclluk) on CodePen

 

I'm using google web designer, so the problem is in there then.

And it's actually only a problem in safari. Works fine in Chrome.

[rotationX only see half image while rotating]

Thanks Jonathan

I was just trying anything to get it to work. I tried both by themselves, but still not working right in Safari with perspective or transformPerspective.

[rotationX only see half image while rotating]

It's working here.

See the Pen wWXAJB by sirhclluk (@sirhclluk) on CodePen

 

I'm using google web designer, so the problem is in there then.

And it's actually only a problem in safari. Works fine in Chrome.

[rotationX only see half image while rotating]

Hello

I'm using rotationX on a png. I only see half the png on rotation. When it stops I see the whole image.

See something missing in the code? Thanks

 

TweenLite.set(pie, {perspective:800, transformPerspective:800});

 

var tl;

 

  tl = new TimelineLite({}); 

  tl.to(pie, .5, {autoAlpha:1, immediateRender:false})

    .from(pie, 1.5, {x:"-=100", scale:1.5, rotationX: 90, transformOrigin:"left center", ease:Power2.easeInOut}, "-=.5")

[morphSVG not working outside of codepen]

Hi Jonathan.

I do have business green.  

 

I have it working built in dreamweaver now. 

 

I was trying to use it with Tumult Hype, but I've killed a whole day with no luck.

If anyone is able to make it work within Tumult Hype please pass it on.

 

Thanks

[morphSVG not working outside of codepen]

So I just used your codepen to make sure I could get my own basic shapes to morph.

I works, but! 

I can't get this morph to work outside of codepen. I can only assume it's my js library links?

 

I have these 4 linked along with tweenmax & morphsvg linked from my desktop.

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">

 

 

Please help me morph!

 

Thanks

See the Pen QNEGvv by sirhclluk (@sirhclluk) on CodePen

[lagSmoothing with TimelineLite]

Thanks for the replies from both of you. So are you saying it's built in and I don't need to add code for it to work?

 

Thanks

[lagSmoothing with TimelineLite]

I found how to add lagSmoothing to tweenlite and max, but I have not been able to find or figure out how to use it with TimelineLite.

Where would I add it in this for example?

 

var tl = new TimelineLite();

    tl.to(energyImage, 0, {opacity:0});

    tl.from(shape, 5, {rotationY:"-=3000", ease:Sine.easeIn});

    tl.from(shape, 1, {autoAlpha:0}, "-=4");

 

 

 

 

Thanks

[what software are you guys using to build banners with js?]

Thanks for the response and links. What is the link you wanted to give for Carl?

 

Thanks Rodrigo

[what software are you guys using to build banners with js?]

I'm a knucklehead on this topic. AS3 was obvious, you build it in Flash.
I don't know what software to use greensock js with to build banners. What are most people using? I'm a visual person, so I'm drawn to the idea of using Edge, but I'm not sure if that's the best choice. The new Google Web Designer looks interesting. I've found there are many options out there, so any suggestions would be awesome.

Thanks.

[what software is best to use with your js code]

yes I'm going to ask this.

So using the js to create a non-flash animation, what program do you recommend doing this with?

When published/saved is the resulting file an html and several js files?

 

Thanks