Search the Community
Showing results for tags 'pseudo element'.
Found 4 results
-
Hi. I have a question about how to target :before element and run a tween on it, and need help to run my codepen demo. I found some people have shown a demo targeting ".class:before"[1][2][3][4], and came across a website[5] that is apparently using GSAP and targeting :before element. However, I also found other people said it is impossible[6], and my codepen demo doesn't work. Can anyone fix my codepen to target :before element? I'm using the latest version of GSAP ("gsap": "^3.9.1") with nextjs for my production environment. Thank you in advance. [1] [2] [3] [4] [5] https://giginc.co.jp/ [6]
-
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
-
Hey guys long time no bother, happy new year. Congratulations on getting on the top of most hearted pens of 2014 http://codepen.io/2014/popular/ So I can't seem to skew my pseudo element, tried a bunch of formats ie skewY:10 Hopefully you can tell me what am doing wrong. Thanks.
-
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!
