Animation blocked by inline CSS?

[Peter K]

Hi all.

 

Can GSAP work on a div that already has multiple inline styles applied to it?

My div has a class of 'demomove' applied to it (by me) and my actual JS is simply:

 

gsap.to(".demomove", {duration: 2, x: 300});

The problem is the html I have to apply the above to has a ton of inline styles applied. It's a real mess but it's auto-generated by an application I have to use
 

<div 
class="ggskin ggskin_svg demomove" 
style="height: 59px;left: -87.5px;opacity: 0.75;position: absolute;top: 0px;visibility: inherit;width: 550px;pointer-events: auto;transform-origin: 50% 50%;transition: none 0s ease 0s;"><img class="ggskin ggskin_svg" 
src="images/svg_2.svg" 
alt="Logos" 
style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;-webkit-user-drag:none;pointer-events:none;;">
</div>

 

Can GSAP work where there are so many inline styles?

I think this might also be why I am getting a Chrome error of

 

Quote

gsap.min.js:10 GSAP target .demomove not found.

Thanks
 

[PointC]

Hi @Eladnova

 

Welcome to the forum.

 

I'd recommend setting properties with GSAP when possible. That being said, I don't see anything that shouldn't work in your code. (The transition in your styles could be a conflict. )

 

My guess would be that your DOM isn't ready when you try to animate that div so GSAP is throwing that error.

 

Do you have a demo available?

 

[ZachSaucier]

13 minutes ago, PointC said:

My guess would be that your DOM isn't ready when you try to animate that div so GSAP is throwing that error.

That'd be my guess as well. Usually you want to put the <script> tags right before the closing body tags as talked about in the <script> video in the installation docs.