Jump to content

alex.w.brasileiro

ShockinglyGreen
  • Content Count

    3
  • Joined

  • Last visited

Community Reputation

1 Newbie

About alex.w.brasileiro

  • Rank
    Newbie
  1. 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
  2. Hey! Yes i tried :before to... doesn't work, thank you for you reply
  3. 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.