Forked ScrollTrigger demo from codepen. Can't use quickSetter because of pseudo element.

[kohlej]

Hello all,

I used a codepen demo I found here. It skews element on scroll and resets position once you stop.

If you check the codepen demo, it works, but only because the target is ".circle", I want target to be ".circle:after".

For this I need to use cssRule to select pseudo element, but since the demo is using quickSetter, I'm not sure how to adapt it.

Is it possible, if so, could anyone tell me how?

PS, I can get wanted result without using pesudo, by using another div with absolute position, but duo to design choices, I have to use pesudo in RL example.

Thanks in advance.

See the Pen poyoWNN by artyor (@artyor) on CodePen

[ZachSaucier]

Hey kohlej.

 

Psuedo-elements are not directly style-able from JavaScript. This is a browser-level limitation. The only way to animate them from JS are to 

1. Animate CSS variables and use those CSS variables in the pseudo-element's styles or
2. Animate the actual stylesheet values (this is what the CSSRulePlugin does) but that's not very performant if you're doing a lot of updates.

So you can't use quickSetter directly on the psuedo-element. Depending on the browser support you need, I recommend using a CSS variable and animating that.

 

As a secondary option, try using CSSRulePlugin but it likely will not perform as well as the method you started from that uses quickSetter.

 

33 minutes ago, kohlej said:

due to design choices, I have to use pesudo in RL example.

I don't understand how the design choice makes it be a psuedo-element. Visually a child element is the exact same as a pseudo-element. 

[kohlej]

7 hours ago, ZachSaucier said:

 

I don't understand how the design choice makes it be a psuedo-element. Visually a child element is the exact same as a pseudo-element. 

Basically I wanted to animate text, and instead of having same text appear 3x in DOM, and then placing it behind with position absolute, I found it much more neat to use :after and :before to collect data with content: attr(). I just used boxes for codepen as it's faster to make and easier to understand.



I would never think of animating CSS variable. How would I target it tho in quickSetter? What I tried is:

EDIT:
Update in comment below, I got it to work.

[kohlej]

Sorry, I found a way how to animate vars, I will update my the post if I cant make it work.

EDIT:
I got it to work,  thanks Zach.

Could you please confirm that I'm not doing anything too stupid related to replaced code?

See the Pen poyoWNN?editors=0110 by artyor (@artyor) on CodePen