Jump to content
Search Community

Yashi-2

Members

  • Posts

    39

  • Joined

  • Last visited

 Content Type 

Posts posted by Yashi-2

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    29 minutes ago, GreenSock said:

     

    Yeah, that doesn't really help at all. We need to see the non-working version. :( 

     

    Maybe try stackblitz.com? Or Codesandbox.io? 

     

    OK, i found the issue. check this out. its bundled using parcel.js it does the same thing like webpack. i think the issue is in hot-module replacement, when we start dev or production mode. webpack write link-href tag into the file head area (invisible) but in this current situation link-href not presence in html file. production build also not presence the link-href until you build, but when i include css file directly in header area there is no issue at all.

     

    to check the issue. just comment out the html link-href.

     

    https://codesandbox.io/s/9l9xvz806p

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    2 minutes ago, GreenSock said:

     

    Aha! That may be the key. I wonder if either the external CSS files haven't fully loaded at that time yet or perhaps they don't contain the style you think they contain. Again, I really wish you could provide an actual reduced test case that we could see for ourselves. I'm not sure we can do much else without that. I'd bet that if you put the styles directly in the page it'd work, though I know that may not be ideal in your scenario. 

     

    yes for development i want to use hot module replacement, but there is a feature call writetodisk. it will allow us to output css into a file. i just tested it, it also doesn't work. i mean file is outputting correctly but error is still there.  actually i'm thinking about how to give you guys a codepen demo. i don't know how webpack import will handle in codepen

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    webpack.dev.js - scss rule

      

    rules: [{
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            // minimize: true,
                            modules: false,
                            importLoaders: 1
                        }
                    },

                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            ident: 'postcss'
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/compass-mixins/lib/'),
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss/'),
                                path.resolve(__dirname, 'node_modules/bootstrap/scss/'),
                                path.resolve(__dirname, 'node_modules/bourbon/core/'),
                            ]
                        }
                    }
                ]
            },

     

     

    with css-loader

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    3 minutes ago, Rodrigo said:

    Hi,

     

    Unfortunately nothing of this is getting us closer to solve this. You haven't informed us what type of app this is, React, Vue, Meteor, jQuery, etc? That could be critical in order to narrow it down, so please let us know about that part.

     

    Also it would be nice to know two things. First, right after creating the css rule variable could you add the following code:

      

    
var menuLine = CSSRulePlugin.getRule(".header__outer:after");
// add this 
console.log( document.querySelector(".header__outer") );

     

    This in order to know if the element is actually in the DOM at that point (which is related to @Jonathan's post regarding the fact of what is going on with the DOM when the code is executed).

     

    Second, you mentioned that you're using webpack with SASS loader. What is exactly your webpack config just regarding that (we do not need to see your entire webpack.config.js file right now, just the part of getting the SASS files and turning them to CSS. I assume that you're using the SASS loader first and then the CSS loader. In the same regard, is your CSS actually being bundled and visible on the project (again and sorry for being so persistent about it, what type of project we're talking about here).

     

    Happy Tweening!! 

     

    so sorry my bad. its a jQuery project. with webpack. actually its not an app. it a website  . please find the attach files

     

    postcss.config.js

    package.json

    webpack.dev.js

    webpack.prod.js

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    11 minutes ago, GreenSock said:

    I'm sure we could help if we can see your actual project or a codepen demo (even better). It's just so hard to troubleshoot blind like this. I really want to help, but my hands are tied. That error almost sounds like CSSRulePlugin wasn't loaded (which is odd because you're referencing it directly in that "plugins" const). 

     

    i can,  but that is the only thing in my js file. nothing else.  its just a import and calling it. i don't know is this okay to give you a codepen demo.  but i can attach my webpack.config.js, index.js and package.json file, or if anything else you need to solve this i can provide. :(

     

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    14 minutes ago, Jonathan said:

    Just to piggy back on what Jack (@GreenSock) wrote.

     

    Have you tried running your GSAP code only after the DOM is ready/loaded (html document) and the window is loaded (all external assets are loaded). This will make sure you only run your code when the DOM is ready and the window is fully loaded. I never messed with REACT so i dont know how react loads or if it waits for DOM and window to be loaded before running your custom JS.

     

    For example this will make sure that the window and DOM are fully loaded even if the document or window fire before or after one another:

      

    
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until all external assets are loaded (media assets, images, css, js, fonts, etc)
  window.addEventListener("load", function (event) {
    
    // add custom GSAP code here
    
  }, false);  
  
});

     

    :)

     

     

    tried this. it gives me this error

      

    import { TimelineMax, CSSPlugin, CSSRulePlugin } from "gsap/all";
const plugins = [TimelineMax, CSSPlugin, CSSRulePlugin];

document.addEventListener("DOMContentLoaded", function(event) {
  
        // wait until all external assets are loaded (media assets, images, css, js, fonts, etc)
        window.addEventListener("load", function (event) {
          
            var menuLine = CSSRulePlugin.getRule('.header__outer:after');
            TweenMax.to(menuLine, 1, {cssRule:{width:'100%'}});
          
        }, false);  
        
      });

     

    Quote

    DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
        at Function.CSSRulePlugin.getRule (http://localhost:3000/bundle.js:4455:19)
        at http://localhost:3000/bundle.js:43072:83

     

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    20 minutes ago, GreenSock said:

    Sorry to hear about the trouble. Is there any way you could provide a reduced test case in codepen or something so that we can see what's going on? We'd love to help, but it's tough to troubleshoot blind. 

     

    I doubt this is the main issue, but I was wondering if maybe tree shaking was getting rid of CSSPlugin in your bundler or something. If so, simply reference CSSPlugin somewhere in your code as we describe in the docs: https://greensock.com/docs/NPMUsage

     

    I also wonder if it'd help at all to use two colons, like .header__outer::after. I doubt it, but it's worth a shot. :)

     

    i tried TreeShaking. but its still not working.

      

    import { TimelineMax, CSSPlugin, CSSRulePlugin } from "gsap/all";
const plugins = [TimelineMax, CSSPlugin, CSSRulePlugin];

 var menuLine = CSSRulePlugin.getRule('.header__outer:after');
            TweenMax.to(menuLine, 1, {cssRule:{width:'100%'}});

     

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    4 minutes ago, Jonathan said:

    Hi @Yashi-2 and Welcome to the GreenSock Forum!

     

    Make sure that your the CSS rule used in your getRule() method is the exact same CSS rule used in your CSS stylesheet.

     

    So since you have the following getRule() :

      

    
getRule(".header__outer:after")

     

    your CSS stylesheet should also have the following:

      

    
.header__outer:after {  
  
}

     

    Happy Tweeening! :)

     

    Yes its exactly the same. i tried 2 different ways. one with SCSS nesting and one with normal CSS Rule, i know they both are same. but i though its because SCSS nesting

     

    Normal CSS

      

    .header__outer{
	@include xy-grid;
    @include flex-align(center);
    @include position(relative);
    z-index: 999;
}
.header__outer:after{
    content:'';
    height:3px;
    width: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(90deg,#7068e0 -2%,rgba(240,96,24,1) 20%,rgba(240,164,24,1) 33%,#00dcff 46%);
}

     

     

    SCSS 

      

    .header__outer {
        @include xy-grid;
        @include flex-align(center);
        @include position(relative);

        z-index: 999;
        &:after{
            content:'';
            height:3px;
            width: 0%;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            background-image: linear-gradient(90deg,#7068e0 -2%,rgba(240,96,24,1) 20%,rgba(240,164,24,1) 33%,#00dcff 46%);

        }
}

     

     

    Still no luck :(

     

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    20 minutes ago, Rodrigo said:

    Hi,

     

    I don't know if this is completely related to webpack. The error comes from the css rule returning null.

     

    Unfortunately the information you're providing is not enough to get a complete idea of what you're trying to do and your setup.

     

    If you're working with React, or VueJS this thread could help you:

     

    Here is a live sample:

     

    https://stackblitz.com/edit/gsap-react-pseudo-element-tween

     

    Beyond that is not much I can do to help you.

     

    Happy tweening!!

     

     

    this seems fine to me, i did exactly the same. i dont know how to solve this. or do i have to load css-loader. because i use scss-loader only

    CSSPlugin Webpack error - Uncaught Cannot tween a null target

    in GSAP

    Posted

    Hi , i just include tweenmax, cssplugin and cssruleplugin into my webpack config file and i followed the documentation problem is when i create a tween using cssRule its gives me "Uncaught Cannot tween a null target" 

      

    import { TweenMax  } from "gsap/all";
import CSSRulePlugin from "gsap/CSSRulePlugin";
import CSSPlugin from "gsap/CSSPlugin";

var menuLine = CSSRulePlugin.getRule(".header__outer:after");

TweenMax.to(menuLine, 1, {cssRule:{color:'#FFF'}});

     

    ScrollMagic GSAP SVG Mask Bug

    in GSAP

    Posted

    I've experienced the same issue you have right now. but it only happens when I create SVG in HTML document. (Like copy paste SVG from illustrator or svgomg, and  also coding SVG data by hand without concerning browser compatibility ) I know its kind of wired. but to solve my problem I used SnapSVG plugin to create and animate SVG element with GSAP. specially masking and clipping related animations. and it can handle browser compatibility pretty well. but like @Carl sed before try to avoid <defs> data animation as much as possible. this might not be the correct solution but I suggest you to give it a try and see. but for me, the SnapSVG plugin work well with every desktop and mobile browsers.

    • Like 1
1
2
Page 1 of 2  
×
×
  • Create New...