Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kmytor

Add style in pseudo-class

Recommended Posts

Hi,
I have this code with a pseudo-class::before  and I also can't make this go the other way

 function animaOpen(){
    gsap.timeline()
    .to(".nav-megamenu", {duration0.5right:0,})
    .from("ul#menu-mega-menu li", {right:-100stagger0.1duration:0.2ease:"back"}, "-=1");
 }
 
 
 btonMobile.onclick = function () {
    //console.log(rotate);
    if (".hambur-movil" !== "right: -190px") {
        rotate();
        }else if(".hambur-movil" === "right: 0px"){
        rotate.reverse();
    }
 }
 
&:before{
                            positionabsolute;
                            top0;
                            left0;
                            width100%;
                            height100%;
                            background:url(./icon.svg)  no-repeat center center;
                            background-size70%;
                            content"";
                            z-index0;
                            transformscale(0.80.8rotate(45deg);
                        }

i want to know how to add this class with gsap, is there any way?
otherwise I would have to change the structure of many parts of my website

 

Help!

Link to comment
Share on other sites

Hi @kmytor,

 

It would really helpful for us (to help you) if you show this working or not working in CodePen.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

With your code above it's really hard to know what is going on because either

  • There is code at play that we are not seeing, or
  • The code above is simply invalid
  • Like 1
  • Thanks 1
Link to comment
Share on other sites

In general there are a few different ways that you can affect a pseudo-element:

  • Add/remove a class on a parent element that affects the style of the pseudo-element. However doing so restricts you to CSS transitions which are fairly limited in what they accomplish.
  • Animate CSS variables that are used in the pseudo-element. This works pretty well but doesn't have perfect browser support.
  • Update the actual stylesheet every tick when you need the value to change. This is what GSAP's CSSRulePlugin does under the hood. It's not very performant though (not GSAP's fault).
  • Use a real element instead of a pseudo-element. Then you can animate it without issues.

I recommend doing the last option, using a real element instead of a pseudo-element.

 

Some notes about your code:

  • Animating properties like right are not performant. You should try to stick to more performant properties like x instead.
  • Instead of animating transforms using the form transform: "scale(0) rotate(0)", you should animate individual properties instead. In this case it would be scale: 0, rotate: 0.
  • Your if statements in your btnMobile click function will never evaluate to true because they're just strings that are not equal. You should be comparing the state of your animation or a boolean that keeps track of the state instead.
  • If your variables aren't going to change you should use const instead of let.
  • In your animaOpenMenuMovile you have a -=1 on the second tween but the first tween only has a duration of 0.5. That means that the second tween will jump to a state mid way through it's animation which is likely not what you want. I might use "<" instead which makes the second tween start at the same time as the first. Or just use an absolute value of 0. See this post on the position parameter for more info:
  • It's generally best to avoid seeing onclick listeners and such and use .addEventListener() instead. That's because onclicks from different files (or the same file) applied to the same element could override each other whereas that can't happen with .addEventListener().

Additionally, instead of creating new tweens/timelines every time it is clicked, I highly recommend setting things up initially and then controlling the state of those animations using control methods. It keeps the logic more simple and is more performant. I talk more about doing that in my article on animating efficiently which I highly recommend that you read thoroughly :) 

 

It's also best to set all transforms of elements that you'll be animating with GSAP with GSAP. So I'd move the transform for the plus to GSAP.

 

With all of that being said, here's how I'd set it up:

See the Pen GRoJNmE?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Your if statements in your btnMobile click function will never evaluate to true because they're just strings that are not equal. You should be comparing the state of your animation or a boolean that keeps track of the state instead.

 

Came in to point this out but saw you were responding, Zach! +1

  • Thanks 1
Link to comment
Share on other sites

1 hour ago, Shaun Gorneau said:

 

Came in to point this out but saw you were responding, Zach! +1

Excellent thank you very much for the recommendations of the use I will study more, I really like how gsap is used. you are so friendly.
Thank you

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.
×