[Animate pseudo-elements on React App]

25 minutes ago, Rodrigo said:

Hi and welcome to the GreenSock forums.

 

Just use the componentDidMount method (careful now with calling them hooks, it can create a bit of a confusion ) and also remember that the CSS Rule needs to be wrapped in the cssRule: {} configuration object:

 

componentDidMount() {
  console.log( this.button );
  const rule = CSSRulePlugin.getRule(".element:before");
  console.log( rule );
  TweenLite.to( rule, 1, {
    cssRule: { bottom: 0 },
    delay: 1
  });
}

 

I know that the norm is to use the refs for to get the DOM node, but keep in mind that pseudo elements  are not DOM elements (as far as I know at least but I could be wrong about it), so there is no way to get the pseudo element the react-way soto speak. My advice would be to store the rule in the component's instance (in the constructor method) and when you need to access it just use that reference to check if it exists before using it in a GSAP instance.

 

This sample seems to work:

 

https://stackblitz.com/edit/gsap-react-pseudo-element-tween?file=index.js

 

Hope that it helps you in some way.

 

Happy Tweening!!!

 

 

Hi Rodrigo!

Man, I just forgot the life-cycle componentDidMount ?!
Thanks for the answer, I'll implement with your tips and I'll come back to let you know if it worked as expected

About that: "My advice would be to store the rule in the component's instance (in the constructor method) and when you need to access it just use that reference to check if it exists before using it in a GSAP instance."
- Thanks for the advice, I'll also test this idea.

Again, thanks <3

[Animate pseudo-elements on React App]

35 minutes ago, GreenSock said:

Have you tried using just one ":"? Like :before? Some browsers report things that way. 

Hey! Yes i tried :before to... doesn't work, thank you for you reply

[Animate pseudo-elements on React App]

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.