How to use pseudo class with find method

[Narendra Verma]

Hello,

I am using scroll magic,  What I am doing is, I have to scroll the element on scroll.

 

I fount the example here

See the Pen zaBYoW by PointC (@PointC) on CodePen.

and I try to understand the script but I am not able to use pseudo class with find method.

Would you help me out this?

See the Pen gOpoaYW by Narendra_verma (@Narendra_verma) on CodePen.

[mikel]

Hey @hybreeder,

 

Take a closer look at the demo.
You need a spacer (min height, which extends to the trigger!)
Enough body height to scroll past the trigger end.
The location object has no pseudo class (???).

 

See the Pen rNVpOPO by mikeK (@mikeK) on CodePen.

 

Happy learning ...

Mikel

 

[Narendra Verma]

@mikel  There is a css called as  .wrapper .location:before. So I want to know how can I target the location:before

 

I know I have to use CSSRulePlugin.getRule()   but how can I use when I am using find method?

I found one website https://nobox.pt/en/about      for reference. The heart and circle are animating when you scroll.

Edited March 9, 2020 by hybreeder

[ZachSaucier]

The CSSRulePlugin docs have examples of how to use it. It's probably best to either use a regular element or use CSS variables instead. 

 

ScrollMagic isn't a GreenSock product and we don't really recommend using it. You can get the same effect without ScrollMagic: 

See the Pen dyoOgYj by GreenSock (@GreenSock) on CodePen.

[Narendra Verma]

@ZachSaucier, Yes, I read the doc. I know I have to use CSSRulePlugin.getRule(".myClass::before");

 

Is this code is correct?

var rule  = $(this).find(".location:before");
var child = CSSRulePlugin.getRule(rule);

[ZachSaucier]

1 minute ago, hybreeder said:

Is this code is correct?

var rule  = $(this).find(".location:before");
var child = CSSRulePlugin.getRule(rule);

Nope. CSSRulePlugin requires that you give it selector text. You're trying to pass in an element reference, which is invalid.

 

Like I said, it's generally best to use a regular element or CSS variables instead of CSSRulePlugin. That way you can scope things as you need to.

[Narendra Verma]

@ZachSaucier, Can you help me with an example?

[mikel]

Hey @hybreeder,

 

You could use the sample code in the docs of CSSRulePlugin

 

See the Pen OJVQreG by mikeK (@mikeK) on CodePen.

 

Happy ruling ...

Mikel

[Narendra Verma]

@mikel, Yes your code pen is good  but I have to use  $(this).find(".location");

[mikel]

Hey @hybreeder,

 

Please check the pointer of @ZachSaucier

 

On 3/9/2020 at 2:15 PM, ZachSaucier said:

Nope. CSSRulePlugin requires that you give it selector text. You're trying to pass in an element reference, which is invalid.

 

var rule = CSSRulePlugin.getRule(".myClass::before"); // !!!

See the Pen bGdLZQv by mikeK (@mikeK) on CodePen.

 

Keep cool - step by step ...

Mikel

[ZachSaucier]

3 hours ago, hybreeder said:

I have to use  $(this).find(".location");

Again, use a regular element or CSS variables.

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

[Narendra Verma]

@ZachSaucier I am really appreciate if you help me with this animation

See the Pen zaBYoW by PointC (@PointC) on CodePen.

with my location icon. I have to move my location icon when scroll. Your code pen answer is different.

 

One more example, I need my location icon like this https://nobox.pt/en/about 

Please check the heart animation when I scroll bottom the heart going to up and when I scroll top then heart going to the bottom

 

[ZachSaucier]

5 hours ago, hybreeder said:

I have to move my location icon when scroll. Your code pen answer is different.

Great! So just change the animation to one that you need.

[Narendra Verma]

@ZachSaucier, Yes, I need to understand what code I have to use.

[ZachSaucier]

We can't do it for you. Switch out the properties and values for the ones that you need.

[Narendra Verma]

@ZachSaucier, I got more than 5 code pen answer in this question but none of solved my issue. I don't understand if I shared my code pen link then why I am getting with different animation and code. Is there any issue with my explanation? I agree that you can't do it for me but at least suggest to me how you can solve this use.

[Narendra Verma]

Any update on this?

[ZachSaucier]

@hybreeder I believe I've given you all of the necessary information to accomplish your goal. I cannot do your work for you.