Jump to content
Search Community

pursue element at Angular 9

Lichay test
Moderator Tag

Go to solution Solved by Sub X,

Recommended Posts

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

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!

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

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

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

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

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.
×
×
  • Create New...