Jump to content
Search Community

Animate pseudo-elements on React App

alex.w.brasileiro test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Edited by alex.w.brasileiro
Remember to use Ref for React
Link to comment
Share on other sites

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 :D) 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!!!

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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 :D) 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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...