Hi guys ?
I tried to animate the ':: before' pseudo-element of a button in a React application with Styled-Components ... I know, it's a bit crazy ?
But, unfortunately, I did not have much success, here is my code ....
import React, { Component } from 'react';
import styled from 'styled-components';
import { TweenLite, CSSPlugin, CSSRulePlugin } from 'gsap/all';
const ButtonElement = styled.button`
width: 200px;
height: 60px;
border-radius: 30px;
line-height: 60px;
background: #F9AE32;
color: #0D0F1B;
font-size: 1.6rem;
text-align: center;
font-weight: 500;
position: relative;
::before {
content: '';
width: 100%;
height: 100%;
border-radius: 30px;
background: #C18522;
position: absolute;
bottom: -38px;
right: -178px;
}
`;
export default class Button extends Component {
animateMenuOpen = () => {
let buttonElementBefore = CSSRulePlugin.getRule("button::before");
console.log('buttonElementBefore', buttonElementBefore); // return undefined
// it doesn't work...
TweenLite.to(buttonElementBefore, .400, {
x: 500
})
}
animateMenuClose = () => {}
render() {
return (
<ButtonElement
ref={ref => this.buttonElement = ref}
onMouseEnter={this.animateMenuOpen}
onMouseLeave={this.animateMenuClose}
>Button Text</ButtonElement>
)
}
}
What am I missing here? ?
I know that to animate with GSAP and React we need the ref, so I tried that way ...
let buttonElementBefore = CSSRulePlugin.getRule(`${this.buttonElement}::before`);
console.log('this.buttonElementBefore', this.buttonElementBefore);
But, still did not work ?
Thank you guys ?
Alex.