Jump to content

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


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 16 results

  1. Hi, Extremely new to GSAP etc, and I only found myself here by accident after weeks of trying to find something JS that would speak to pseudo elements. So hooray!! My problem is I can't seem to figure out how to get my function to repeat and I'm not sure if I've quite nailed the conversion. I've converted from a keyframes animation and it seems to be working okay, however it only does it once and then stops. I've looked through a variety of the instructions and forum questions on here to get to where I have, but each one doesn't seem to quite gel to my situation.
  2. Hey! I've recently started using gsap and was trying to animate the links for a header. I've realised that the animation works fine if the I use 'a' as selector. But if I use '.linkto1' or any other class, the plugin doesn't work. I was actually trying to animate the before pseudo-elements on a but while trying various things, I figured out that classes were not being registered. How do I fix this?
  3. let ImageReveal = CSSRulePlugin.getRule('.img__container::after') let tl = new TimelineLite() useEffect(() => { tl.to(container, 0, { css: { visibility: 'visible' } }) .to(ImageReveal, 1.8, { width: '0%', ease: Power2.easeInOut, }) .to(image, 1.4, { scale: '1.0', ease: Power2.easeInOut, delay: -1.6 }) }, [ ]) I want ImageReveal pseudo element to have 0% width with animation once the component has been mounted. But whenever Im reloading the page , it is lagging too much, th
  4. Dear GSAP community, I would like to ask for your advice concerning the CSSRulePlugin's usage in a for loop. From what I found out, it seems to be required, that the css rule, that the CSSRulePlugin is supposed to access, needs to be present in the stylesheet in exactly the same way. So writing something like let rule = CSSRulePlugin.getRule("slide0 .headline:before") requires .slide0 .headline:before to present in the CSS stylesheets. It will not work, when the style is defined differently, like .slides .headline:before . But in a slider the am
  5. Hello everyone, I've just upgraded my project to GSAP v3, but CSSRulePlugin doesn't works properly anymore. In a first time i've thinked that was a problem behin the CDN delivery but after few tests, i can't see where exactly is the problem. Below, the console warned me about stuff extends with CSSRulePLugin. Someone can explain to me what should i change to make it work ? Thanks you by advance !
  6. I have multiple buttons with the same class on a page. I have a mouseover event on the buttons and I want to update the :before pseudo on the current button. How would I pass in the current button so that not all buttons would update if i were to use the CSS class attached to all buttons? Is it possible to use `this` at all or would I have to apply a unique class to each button or something?
  7. 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'}});
  8. 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/
  9. 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');
  10. 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 ani
  11. 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: {tr
  12. 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 pseu
  13. 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
  14. 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 ^_^'
  15. 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.
  16. 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 m