Add style in pseudo-class

[kmytor]

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", {duration: 0.5, right:0,})

    .from("ul#menu-mega-menu li", {right:-100, stagger: 0.1, duration:0.2, ease:"back"}, "-=1");

 }

 

 

 btonMobile.onclick = function () {

    //console.log(rotate);

    if (".hambur-movil" !== "right: -190px") {

        rotate();

        }else if(".hambur-movil" === "right: 0px"){

        rotate.reverse();

    }

 }

 

&:before{

                            position: absolute;

                            top: 0;

                            left: 0;

                            width: 100%;

                            height: 100%;

                            background:url(./icon.svg)  no-repeat center center;

                            background-size: 70%;

                            content: "";

                            z-index: 0;

                            transform: scale(0.8, 0.8) rotate(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!

[Shaun Gorneau]

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

[kmytor]

Sorry, here is my example. I wish I could close and open the menu on the button and the button would rotate 45 degrees

See the Pen ExVXOwM?editors=0010 by kmytor (@kmytor) on CodePen

[ZachSaucier]

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

[Shaun Gorneau]

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

[kmytor]

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