Share Posted March 9, 2020 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 comment Share on other sites More sharing options...
Share Posted March 9, 2020 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 9, 2020 (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 March 9, 2020 by hybreeder Link to comment Share on other sites More sharing options...
Share Posted March 9, 2020 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 9, 2020 @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 comment Share on other sites More sharing options...
Share Posted March 9, 2020 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 12, 2020 @ZachSaucier, Can you help me with an example? Link to comment Share on other sites More sharing options...
Share Posted March 12, 2020 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 Link to comment Share on other sites More sharing options...
Author Share Posted March 12, 2020 @mikel, Yes your code pen is good but I have to use $(this).find(".location"); Link to comment Share on other sites More sharing options...
Share Posted March 12, 2020 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 1 Link to comment Share on other sites More sharing options...
Share Posted March 12, 2020 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 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 14, 2020 @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 comment Share on other sites More sharing options...
Share Posted March 14, 2020 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 comment Share on other sites More sharing options...
Author Share Posted March 14, 2020 @ZachSaucier, Yes, I need to understand what code I have to use. Link to comment Share on other sites More sharing options...
Share Posted March 14, 2020 We can't do it for you. Switch out the properties and values for the ones that you need. Link to comment Share on other sites More sharing options...
Author Share Posted March 14, 2020 @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 comment Share on other sites More sharing options...
Author Share Posted March 18, 2020 Any update on this? Link to comment Share on other sites More sharing options...
Share Posted March 18, 2020 @hybreeder I believe I've given you all of the necessary information to accomplish your goal. I cannot do your work for you. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now