Transforming a rotated div issues

[sorciereus 5 Likes (Newbie)]

Hi there. I'm trying to create a simple shooting star effect by scaling a rotated div.

 

First of all the div scales out as though the star is streaking across (which is correct), then the scale collapses changing it's transform origin. However, as you see in the codepen the div jumps around.

 

I'll probably make a work around and scale an image instead of a rotated div, but I thought I'd check to see if there was a way to do this utilizing only code.

 

JS

TweenMax.set('#star', {rotation:-30});
TweenMax.from("#star", .5, {scaleX:0});
TweenMax.to("#star", .5, {scaleX:0, transformOrigin:"left", delay:.5});

HTML

<div id="star">
    </div>

CSS

star
{
position:absolute;
top:-1;
left:68px;
width:285px;
height:94px;
border-top:1px solid #fff;
opacity:.5;
}

 

See the Pen jbQRmV by anon (@anon) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi sorciereus 

 

you just need to add a container and rotate that : 

See the Pen EVOJQp by MAW (@MAW) on CodePen

[sorciereus 5 Likes (Newbie)]

Aw super boss answer - I had tried that but had the rotated div inside the non rotated div - opps! Thanks (sort of head::palm at the moment)