Search the Community
Showing results for tags 'cssruleplugin'.
Found 17 results
-
Hi, I want to use gsap to animate the two pseudo elements (::before and ::after) of my buttons. The each button element is inside a Group component in my react project. I want to play the animations on ::before and ::after alternately. Here is my code: import React, { useState } from "react"; import { gsap } from "gsap"; import { CSSRulePlugin } from "gsap/CSSRulePlugin"; const animation = (qseudoElement) => { gsap.registerPlugin(CSSRulePlugin); const qseudo = CSSRulePlugin.getRule(qseudoElement); const tl = gsap.timeline(); tl.fromTo( qseudo, { cssRule: { opacity: 0, scale: 0 } }, { cssRule: { opacity: 1, scale: 1 }, duration: 1 } ); tl.to(qseudo, { cssRule: { scale: 0, opacity: 0 }, duration: 1 }); }; const Group = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); if (count % 2 === 0) { animation(".btn::before"); } else { animation(".btn::after"); } }; return ( <div> <button className="btn" onClick={() => handleClick()}>Click Me</button> </div> ); }; export default Group; And I have multiple Group components in my App. import Group from "./components/Group"; import "./styles.css"; export default function App() { return ( <div className="App"> <Group /> <Group /> <Group /> </div> ); } The problem is that if I click on any button, the animations are fire on all buttons. I know this is because of they have the same css class. How can I select the button that is clicked and animate its pseudo elements? I want to achieve something like this: const handleClick = (e) => { setCount(count + 1); if(count % 2 === 0){ animation(e::before); } else { animation(e::after); } } I appreciate your help and I made a demo here: codesandbox
-
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. So basically my keyframes were: @keyframes hello { 0% { top: 100%; } 33%, 100% { top: -50%; } } And my selector: .world::before { animation: hello 3s 0.4s ease-in-out infinite; } So all simple stuff. To convert this, I have this GSAP so far: gsap.registerPlugin(CSSRulePlugin); var rule = CSSRulePlugin.getRule(".world::before"); gsap.to(rule, 0.3, { cssRule: { top: "100%" }, ease: Power4.easeInOut }); gsap.to(rule, 0.7, { cssRule: { top: "-50%" }, ease: Power4.easeInOut }); So everything's talking to each other, but I can't get the GSAP function/rule to do the "infinite" part of the original animation. And again I'm not sure if I've nailed the timings based on the percentages in the keyframes. And of course the 0.4s delay, I'm not sure where to put that either. I've created a code pen with the usual bits to try and illustrate, if that helps at all. Thank you very very much for any help!
-
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?
-
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, the width is becoming 0% but without any effect of animation. Please help!
-
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 amount of slides is various (and they are usually generated via a for loop using data coming from a CMS), so I cannot predefine each and every .slide0, .slide1, .slide2 ... (well, I could, but I would guess that this wouldn't be considered the best approach). I did think about just using ".headline:before", which would give me an array of all available headlines, but that would also mean that the border width of all those elements would be animated, even though only one slider is visible at the moment. How can such a problem be solved? What is your approach? Or what would be your recommendation for me?
-
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 !
-
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?
-
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'}});
-
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/
-
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!
-
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.
-
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
-
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.
-
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
-
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 ^_^'
-
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.
-
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.
