Lichay Posted June 17, 2020 Share Posted June 17, 2020 when I try to use gsap with pursue element it not recognize that my ts import { Component, OnInit } from '@angular/core'; import { gsap } from "gsap"; import { CSSRulePlugin } from "gsap/CSSRulePlugin"; import { ScrollTrigger } from "gsap/ScrollTrigger"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'gsapProject'; ngOnInit() { gsap.registerPlugin(CSSRulePlugin, ScrollTrigger); gsap.from('div h1', { scrollTrigger: 'div h1', y: 200, duration: 5 }); const rule = CSSRulePlugin.getRule('.cc::before'); gsap.to(rule, 3, { cssRule: { color: "#0000FF", x: 50 }, x: 300 }); } } and this my HTML <div> <h1 class="cc">new project</h1> </div> Just try it with a new project for be clear and don't work . This my message from the page gsap-core.js:87 GSAP target undefined not found. https://greensock.com feel like no way to do it. Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2020 Share Posted June 17, 2020 It sounds like there is no ".cc::before" rule. Did you try to console.log(rule) before the tween? Also, this is not valid: gsap.to(rule, 3, { cssRule: { color: "#0000FF", x: 50 }, x: 300 }); You're telling the rule to animate x to 50....and you're ALSO telling GSAP to try to animate an "x" property directly on the rule object itself to 300 (without the help of CSSRulePlugin). I assume you didn't mean to leave that "x: 300" in that tween, right? If you still need help, please provide a reduced test case (not just sample code). It's very difficult to troubleshoot blind, that's all. We have to guess at what else is going on in your project, what the context is like, etc. CodePen or codesandbox or something like that would be much better. Thanks! 1 Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 17 minutes ago, GreenSock said: It sounds like there is no ".cc::before" rule. Did you try to console.log(rule) before the tween? Also, this is not valid: gsap.to(rule, 3, { cssRule: { color: "#0000FF", x: 50 }, x: 300 }); You're telling the rule to animate x to 50....and you're ALSO telling GSAP to try to animate an "x" property directly on the rule object itself to 300 (without the help of CSSRulePlugin). I assume you didn't mean to leave that "x: 300" in that tween, right? If you still need help, please provide a reduced test case (not just sample code). It's very difficult to troubleshoot blind, that's all. We have to guess at what else is going on in your project, what the context is like, etc. CodePen or codesandbox or something like that would be much better. Thanks! why not I have a class with name cc when i log in it say "undefined" for no reason Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2020 Share Posted June 17, 2020 I wish I could help, but without a reduced test case I'm afraid I can't do much. I have nothing to look at. Maybe it's a loading order thing, like your CSS isn't parsed by the browser yet? Very difficult for me to know. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 2 minutes ago, GreenSock said: I wish I could help, but without a reduced test case I'm afraid I can't do much. I have nothing to look at. Maybe it's a loading order thing, like your CSS isn't parsed by the browser yet? Very difficult for me to know. do you want my git link? Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2020 Share Posted June 17, 2020 Not really - you'll have a much better chance of getting a prompt and accurate answer if you create the most reduced test case possible (literally just one CSS rule and a <div> maybe) in something like CodePen or JSFiddle or Codesandbox or stackblitz so that we can poke around things directly in the browser without having to set up a whole project, do compile steps, etc. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 so in code pen it work it no metter to me This library doesn't support Angular 9 this is my case Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 16 minutes ago, Lichay said: so in code pen it work it no metter to me How about you share your pen with us? 16 minutes ago, Lichay said: This library doesn't support Angular 9 this is my case It does support Angular 9. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 21 minutes ago, ZachSaucier said: How about you share your pen with us? It does support Angular 9. code pen it regular html css and javascript i don't use them i use framework and it don't work if i share with codepen it maybe work but so .. ? it bad . everyone use framworks like me . and with framwork this plug don't work as 'before' and 'after' like i said above Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 3 minutes ago, Lichay said: everyone use framworks like me . You can use frameworks in CodePen, CodeSandbox, or Stackblitz. It is very helpful for us in debugging the issue when we can edit the minimal code ourselves. 4 minutes ago, Lichay said: with framwork this plug don't work as 'before' and 'after' like i said above Sure it does. If it's not working then there's likely a bug in your code somewhere. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 1 minute ago, ZachSaucier said: You can use frameworks in CodePen, CodeSandbox, or Stackblitz. It is very helpful for us in debugging the issue when we can edit the minimal code ourselves. Sure it does. If it's not working then there's likely a bug in your code somewhere. i open new project to try it so it can't be with my code Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Well it works just fine for me so it has to be something on your end. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 3 minutes ago, ZachSaucier said: Well it works just fine for me so it has to be something on your end. you did npm install gsap only? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Just now, Lichay said: you did npm install gsap only? Yep. Check the URL I sent. I corrected the tween as Jack pointed out and modified the selectors to work with ones I made since you didn't provide any but it works just fine. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 Just now, ZachSaucier said: Yep. Check the URL I sent. I corrected the tween as Jack pointed out and modified the selectors to work with ones I made since you didn't provide any but it works just fine. no way , maybe they use angular 8 or less , in angular 9 it doesn't work try to run it with visual studio code Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Look at the dependencies in the linked site. It's Angular 9. What's the issue? Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 Just now, ZachSaucier said: Look at the dependencies in the linked site. It's Angular 9. What's the issue? don't work Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 It doesn't work for you. As we've been saying this whole time, please make a minimal demo on CodeSandbox or something (or modify the one that I provided) to recreate the error. There's a 99.9% chance that it's an error with code that you wrote because it works just fine in the demo I provided. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 2 minutes ago, ZachSaucier said: It doesn't work for you. As we've been saying this whole time, please make a minimal demo on CodeSandbox or something (or modify the one that I provided) to recreate the error. There's a 99.9% chance that it's an error with code that you wrote because it works just fine in the demo I provided. i copy they code from you and same problem - undefined need to install somthing? like this don't exists Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Check and see if the CSS rules exist. Again, it's very hard for us to help blindly. Please try to make a demo via CodeSandbox. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 1 minute ago, ZachSaucier said: Check and see if the CSS rules exist. Again, it's very hard for us to help blindly. Please try to make a demo via CodeSandbox. wow I think it work now but i have question . it work because i do ::before inside style.css like your project but i don't do it there i want to use it inside app.component.css how can I apply it? style.css too much globally css Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Put it in the component's CSS files then. It shouldn't matter where it lives in terms of CSSRulePlugin. 1 Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 4 minutes ago, ZachSaucier said: Put it in the component's CSS files then. It shouldn't matter where it lives in terms of CSSRulePlugin. yes it is . if i use before inside component css it undefined. try to do it with your codesandbox Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 6 minutes ago, Lichay said: yes it is . if i use before inside component css it undefined Indeed it does behave differently. That's surprising. Apparently Angular changes the literal CSS rule from .cc::before to something like .cc[_ngcontent-ajv-c14]::before but randomly generated each time. Unfortunately there's nothing that GSAP can do about that. If you don't want to include the rule more generally then we recommend animating values of real elements or animating CSS variables instead. Link to comment Share on other sites More sharing options...
Lichay Posted June 17, 2020 Author Share Posted June 17, 2020 3 minutes ago, ZachSaucier said: Indeed it does behave differently. That's surprising. Apparently Angular changes the literal CSS rule from .cc::before to something like .cc[_ngcontent-ajv-c14]::before but randomly generated each time. Unfortunately there's nothing that GSAP can do about that. If you don't want to include the rule more generally then we recommend animating values of real elements or animating CSS variables instead. i hope they will fix it issue . no another way to fix it? 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