Is it Possible to Rotate a Gradient Object in the Timeline?

[kaiijuu]

I am working on a project where I have the gradient object displayed horizontally, but I need to rotate it in the final frame to vertically (so 90 degrees, I believe?)
 

I tried using this kind of syntax(?) and it didn't work:

 

TweenMax.to(g1.el, (css:x:90});

TweenMax.to(g1.el, {attr:{gradientTransform:'rotate(90)'}});

m.tmln.to(g1, {attr:{gradientTransform:'rotate(90)'}});

 

This is the gradient object for reference:
 

g1 = m.construct('grdnt', {
    stops:[
      {offset:0, color:'#e60e64'},
      {offset:1, color:'#572c60'},
    ]
  });

 

Any help would be greatly appreciated! I hope it makes sense!

😇

See the Pen XWpaOqq by kaiijuuu (@kaiijuuu) on CodePen

[Cassie]

Hi Kaijuu!

Is this gradient an SVG gradient? If so the gradientTransform syntax looks correct if you're targeting the gradient element.

 

Maybe you could you rotate the element the gradient is applied to instead?
 

gsap.to(element, {transform:'rotate(90)'});

If it isn't SVG or this isn't helpful, would you be able to attach a minimal demo so we can help you more effectively?

[kaiijuu]

Hello! I added a codepen for easier troubleshooting. I wonder if, because of the box having text, would it be possible to rotate just the box and not the content inside?

[Cassie]

Great!

Thanks for adding that codepen. 🙂

You can position the gradient behind the text and then rotate it like so.

See the Pen ace70af3e197bbe153a79e766a073eff by cassie-codes (@cassie-codes) on CodePen