Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'cssruleplugin'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 10 results

  1. Hi , i just include tweenmax, cssplugin and cssruleplugin into my webpack config file and i followed the documentation problem is when i create a tween using cssRule its gives me "Uncaught Cannot tween a null target" import { TweenMax } from "gsap/all"; import CSSRulePlugin from "gsap/CSSRulePlugin"; import CSSPlugin from "gsap/CSSPlugin"; var menuLine = CSSRulePlugin.getRule(".header__outer:after"); TweenMax.to(menuLine, 1, {cssRule:{color:'#FFF'}});
  2. hello so i tried using CSSRulePlugin.js it worked fine in local i'm using django default local server but when i load it in the production server it doesn't work at all i tried using gsap cdn my cdn from amazon loading if from the same domain but nothing seems to work the console prints me my code is : here is the website the animation trigger when you click on the hamburger https://www.mntad.com/
  3. Hi, I've downloaded TweeMax, TimelinMax and CSSRulePlugin. Are these enough for this code? var openSection = $(".bcg-open"); if (openSection.length) { var sectionBefore = CSSRulePlugin.getRule(".bcg-open:before"), sectionAfter = CSSRulePlugin.getRule(".bcg-open:after"), tl = new TimelineMax({delay:1, repeat:-1, yoyo:true, repeatDelay:2}); tl .to(sectionBefore, 1, {cssRule: {scaleY: 0}}, 'open') .to(sectionAfter, 1, {cssRule: {scaleY: 0}}, 'open'); } Can anybody help me, please? Thanks!
  4. Hi all, I just ran into a weird thing – CssRulePlugin doesn't seem to work in neither Edge 41.16299.15.0 nor IE 11.192.16299.0. Here is what I'm doing (the old 'animate max-height and set height to auto' trick): infoCss = CSSRulePlugin.getRule('#info-input:checked ~ #info-inner'); TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}}); //TW is Tweenlite window.addEventListener('resize', () => { TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}}); }); This is no big deal as I can of course just use GSAP to do the same animation instead, but still, I thought I'd mention it. As soon as I remove the above code, everything else works fine.
  5. Hi there, im new to the GSAP and first of all i want to thank the devs for their great work! Sadly i seem to have a problem bringing together the CSSRulePlugin with a TimeLine-Object; actually i can guess the answer: these both are not supposed to work together, right? Thats what i have for example (for the principle i hope it is ok posting without codepen): var tl = new TimelineLite(); var blueStripePseudo = CSSRulePlugin.getRule('#cropContainer:after'), backWhitePseudo = CSSRulePlugin.getRule("#bckgrImgPartialContainer:after"); tl.from(blueStripePseudo, 1, {cssRule: {transform: "scaleY(5)"}}) from(backWhitePseudo, 2, { cssRule: { width: "100%", ease:Sine.easeInOut}}); If it is possible in general and im doing just something wrong i'd grateful if somebody could enlighten me otherwise i would appreciate if somebody could just confirm ^^ Thank you for your time! regards
  6. Hey Guys! I've recently discovered your awesome products and have been enjoying playing around with the examples. However, I've run into some trouble trying to implement it into my project haha. Yet confident this won't be a biggie for you guys. So , if it's not too much of a bother please take a look at the codepen attached to see what I mean. https://codepen.io/Raulito/pen/jmwXxp *Specifically, I keep getting the error 'cannot tween a null target' in the console , which stops all my other animations from running , when trying to use the CSSRulePlugin to target the :before pseudo element. *I've noticed that this error occurs and can be seen in the console both on codepen AND when doing local development without a server, but for some reason works when I'm developing it locally using XAMP. * Cheers, Raul.
  7. There seems to be an issue with the CSSRulePlugin with complex rules. The getRule method returns null so you get the "Uncaught Cannot tween a null target." error Looking the plugins source, it looks like it should work fine. I'm using Chrome 31 & Firefox 26, not tried anything else. Here's an example with the issue. http://codepen.io/raldred/pen/hcDey
  8. Hi everyone I was looking to use the CSSRulePlugin to perform some em-based transforms that would still work as expected even after a site-wide change in the font-size (for responsiveness). Unfortunately, I think I must be doing something wrong...? When I store the CSS rule into a variable, it's stored as 'undefined', and then of course I get a "Cannot tween a null target" error. Have a look at the codepen, it's pretty simple... I think I just missed something obvious somewhere haha ^_^'
  9. Hi, everyone. I read the spec and know that I can tween the css pseudo-elements (':before', ':after') using CSSRulePlugin.getRule What if I have several elements with the same class name and all of them have pseudo-elements and I want to tween them individually? Is this possible? I tried the CSSRulePlugin.getRule function, and the tween would change all the elements' pseudo-elements. Thanks in advance.
  10. Hi Guys, I'm having a few issues with a little page turner I'm trying to build. I started with Rodrigo's pen (Thank you ) and modified it to resemble a simple hard book (http://codepen.io/rhernando/pen/vjGxH/) where you click the pages and they turn. It currently works quite well in Chrome, Opera and Safari, but has issues in IE and Firefox. Firefox nearly gets it, but doesn't animate the page shading on the before element quite correctly (using CSSRulePlugin). It correctly shades the first page as it's rising, but fails to animate the second page as it's dropping (that might make more sense if you view the demo in Chrome first, then in Firefox) IE 11/10 ignore the perspective on the .Wrapper element. I've seen that you can keep the perspective in IE by repeating the transforms on the child elements, but this hurts my head when I try to do this with GSAP by setting values using TweenMax/TweenLite. Does anyone have any ideas? I've not tried Edge yet... will give that a go later.
×