Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Narendra Verma

How to use pseudo class with find method

Recommended Posts

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

Link to post
Share on other sites

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

 

  • Like 1
Link to post
Share on other sites
Posted (edited)

@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 by hybreeder
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

@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);

Link to post
Share on other sites
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.

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

@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

 

Link to post
Share on other sites
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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

  • Like 2
Link to post
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.

×