Search the Community
Showing results for tags 'cssrule'.
Found 3 results
-
Hi guys, I recently noticed an error with CSSRule that only happens when the css styles are served from CDN assets. So if the stylesheet is inside a local path, the plugin works, but when the same stylesheet is loaded from CDN, CSSRule plugin says "cannot tween a null target", and I can verify the css rule is available on DOM. In this particular case, it was a pseudo element, ":after".
-
Hi I have a site where I have some elements in my style sheet that are set to opacity: 0 and translateX(0), these then animate with a TimelineMax (called sectionThreeIn) '.to' tween and scale up to opacity: 1 and translateX(1) which is all fine. I want to turn these animations off on mobile, so i've done a simple if statement: if (window.innerWidth < 768) { sectionThreeIn = null; } Because the animations only fire once I'm not bothered about doing any window resize events for desktop window sizes. The above if statement prevents the animations from firing on screens below this size, which is great. AREA OF CONFUSION I went into my CSS to add some media queries that change the opacity and transform values both to 1 for screens below 768px now the animations are turned off for the smaller screen sizes, so the elements don't effectively render invisible on mobile/iPad. But even without me doing this the elements are rendering as visible when I refresh the page (and clear the cache) on smaller screen sizes. This is confusing the life out of me. When i turn the if statement off, the CSS behaves as you'd expect, when I turn it on the end state of the animation is being implemented on small screens, but without the animation happening. Ironically what is happening is the end result I'm after, but I don't understand how this can possibly happen? If you make a timeline null, does it render as a completed animation, but without the actual animation happening? Also two of the three elements are using the CSS rule plugin - so I could recreate the issue on codepen, but I don't how to load the Greensock plugins (apart from TweenMax) onto a codepen pen? At present the site is on a localhost setup. I'm very confused.
-
Hello.. Thanks ahead of time for any help! Im trying to animate a pseudo-element with the CSSRulePlugin. But it will only animate the old syntax of :before instead of the new CSS3 double colon syntax ::before. The double colon :: is supposed to help in CSS3, with separating the difference between pseudo classes : and pseudo elements ::. My example (click Run): http://codepen.io/jonathan/pen/enhFy JS: var rule = CSSRulePlugin.getRule(".myClass:before"), rule2 = CSSRulePlugin.getRule(".myClass2::before"); TweenMax.to(rule, 2, {cssRule:{ backgroundColor:"#F43C09" }}); TweenMax.to(rule2, 2, {cssRule:{ backgroundColor:"#F43C09" }}); CSS: .myClass:before { color:#FFF; background-color:#F7A009; content:"This content is a Pseudo Element "; } .myClass2::before { color:#FFF; background-color:#F7A009; content:"This content is a Pseudo Element "; } In my above example you will see both :before and ::before. When i try to animate the ::before i get this error in the console: uncaught exception: Cannot tween a null target. Am i missing something? Thank you for any assistance!
