Dejan Posted November 26, 2019 Share Posted November 26, 2019 Hi, I have i little problem with switching to gsap v3 I have a lot errors in console log of GSAP target not found and error when trying to change attr of element. I created animation last week in old GSAP and everything worked fine. Links to site https://www.identitet021.rs/home/ and https://www.identitet021.rs/development/ site is not live yet. Animation works on home page but it doesnt work as it should, minor problems. Animation on Development page and other functions doesnt work. Little help in transition to GSAP v3 is needed. Great job on GSAP v3. Thanks, Dejan Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 26, 2019 Share Posted November 26, 2019 Hey Dejan and welcome to the GreenSock forums. Unfortunately we don't have the time to go through and fix every warning and error that appears on your page. Please read and use the "GSAP 3 Release Notes" and try and fix each error as you get to them. If you have a particular question, please post a minimal demo of the issue so that we can help with that part. The below thread provides more info on how to do so: 1 Link to comment Share on other sites More sharing options...
Dejan Posted November 26, 2019 Author Share Posted November 26, 2019 I have read "GSAP 3 Release Notes" minimum 15 times and searched the forums for answers but nothing, my main problem is this error Uncaught TypeError: t.getAttribute is not a function at n.init (gsap-core.js:2852) at Bb (gsap-core.js:2048) at _initTween (gsap-core.js:2143) at va (gsap-core.js:299) at _renderZeroDurationTween (gsap-core.js:332) at Tween.render (gsap-core.js:2316) at new Tween (gsap-core.js:2305) at Function.set (gsap-core.js:2506) at _initTween (gsap-core.js:2104) at va (gsap-core.js:299) init @ gsap-core.js:2852 Bb @ gsap-core.js:2048 _initTween @ gsap-core.js:2143 va @ gsap-core.js:299 _renderZeroDurationTween @ gsap-core.js:332 render @ gsap-core.js:2316 Tween @ gsap-core.js:2305 set @ gsap-core.js:2506 _initTween @ gsap-core.js:2104 va @ gsap-core.js:299 render @ gsap-core.js:2354 Tween @ gsap-core.js:2305 from @ gsap-core.js:1431 (anonymous) @ identitet.js:19 gsap.registerPlugin(TextPlugin, CSSRulePlugin, EasePack, AttrPlugin, CSSPlugin); var tl = gsap.timeline({smoothChildTiming: true, paused:true}); tl.from(".logo-lice", {duration: 2, scale:0, transformOrigin: "center", autoAlpha:0}, "prvi") .from(".prvi-krug-logo", 2, {duration: 2, strokeDashoffset: 1610, rotation:-360,scale:0.5, transformOrigin: "center", autoAlpha:0}, "prvi" ) .from(".zubcanik-logo", {duration: 1.5, rotation:360 , scale:0.8, transformOrigin:"center", autoAlpha:0}, "<" ) .to(".zubcanik-logo", {duration: 4, rotation:360, repeat:-1, yoyo:true, transformOrigin:"center", ease: Sine.easeInOut}, "<") .from(".drugo-krug-logo", {duration: 1, scale:0.8, transformOrigin:"center", autoAlpha:0}, "<") code line 19 .from(".linija-about line", {duration: 2, attr: {x1:0, x2:0}, scale:0.2, transformOrigin:"center", autoAlpha:0}, "dva") .from(".linija-marketing line", {duration: 2, attr: {x1:0, x2:0},scale:0.2, transformOrigin:"center", autoAlpha:0}, "dva") .from(".linija-design line", {duration: 2, attr: {x1:2000, x2:2000}, scale:0.2, transformOrigin:"center", autoAlpha:0}, "dva") .from(".linija-development line", {duration: 2, attr: {x1:2000, x2:2000}, scale:0.2, transformOrigin:"center", autoAlpha:0}, "dva") .from(ostaliDeloviLinije, {duration: 1, strokeDashoffset: 35}, "<") .from(".linije-izvan-logoa line", {duration: 1, strokeDashoffset: 130}, "2.5" ) and other 22 warnings are like this GSAP target .logo-lice not found. https://greensock.com L @ gsap-core.js:52 Tween @ gsap-core.js:2239 from @ gsap-core.js:1431 (anonymous) @ identitet.js:14 Invalid scale tween of 0 Missing plugin? gsap.registerPlugin() i have loaded <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> If this doesn't help i will make pen tomorow. Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 26, 2019 Share Posted November 26, 2019 18 minutes ago, Dejan said: If this doesn't help i will make pen tomorow. That'd be great! Minimal demos are very useful. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 27, 2019 Share Posted November 27, 2019 Also, @Dejan, please try using the latest beta file of the core at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js because I have a mild suspicion this could be related to something that was already fixed. 2 Link to comment Share on other sites More sharing options...
Dejan Posted November 27, 2019 Author Share Posted November 27, 2019 I tried with that version to but same error, in codepen works See the Pen zYYVXGQ by DejanId021 (@DejanId021) on CodePen so i then i updated everything and cleaned all errors homepage, but same error with gsap when site goes on second page. Animation works fine on homepage without errors but when i click and go to other page i get warnings from animation on homepage that gsap cant find target element and when tries to fire this animation: .from(".linija-about line", {duration: 2, attr: {x1:0, x2:0}, scale:0.2, transformOrigin:"center", autoAlpha:0}, "dva") gsap breaks and error Uncaught TypeError: t.getAttribute is not a function at n.init (gsap-core.js:2852) at Bb (gsap-core.js:2048) at _initTween (gsap-core.js:2143) at va (gsap-core.js:299) at _renderZeroDurationTween (gsap-core.js:332) at Tween.render (gsap-core.js:2316) at new Tween (gsap-core.js:2305) at Function.set (gsap-core.js:2506) at _initTween (gsap-core.js:2104) at va (gsap-core.js:299) init @ gsap-core.js:2852 Bb @ gsap-core.js:2048 _initTween @ gsap-core.js:2143 va @ gsap-core.js:299 _renderZeroDurationTween @ gsap-core.js:332 render @ gsap-core.js:2316 Tween @ gsap-core.js:2305 set @ gsap-core.js:2506 _initTween @ gsap-core.js:2104 va @ gsap-core.js:299 render @ gsap-core.js:2354 Tween @ gsap-core.js:2305 from @ gsap-core.js:1431 (anonymous) @ identitet.js:19 i @ jquery.js?ver=1.12.4-wp:2 fireWith @ jquery.js?ver=1.12.4-wp:2 ready @ jquery.js?ver=1.12.4-wp:2 J @ jquery.js?ver=1.12.4-wp:2 Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 25 minutes ago, Dejan said: Animation works fine on homepage without errors but when i click and go to other page i get warnings from animation on homepage that gsap cant find target element and when tries to fire this animation: .from(".linija-about line", {duration: 2, attr: {x1:0, x2:0}, scale:0.2, transformOrigin:"center", autoAlpha:0}, "dva") gsap can't find the target because it doesn't exist... at least when that code runs. You need to make sure what your animating is in the DOM before running that script. 1 Link to comment Share on other sites More sharing options...
Dejan Posted November 27, 2019 Author Share Posted November 27, 2019 Yes i know like i said that animation is for homepage and it works fine no errors no warnings but problem is on second page of site for every line before that is a warning in console that gsap cant find target because its on homepage i know that, but it breaks on animation that have attr obj in it when i remove those animation there is no error in console only warnings. So problem is when i have i attr in animation for another page and code is before active pages code, code breaks and animation is never loaded. Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 Just now, Dejan said: So problem is when i have i attr in animation for another page curent page breaks. Then why are you running that script if it's not for the current page? 2 Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 9 hours ago, GreenSock said: Also, @Dejan, please try using the latest beta file of the core at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js because I have a mild suspicion this could be related to something that was already fixed. What was fixed? The plugin errors if the target is undefined. gsap.to(undefined, { attr: { foo: 1 } }); 1 Link to comment Share on other sites More sharing options...
Dejan Posted November 27, 2019 Author Share Posted November 27, 2019 Thanks for help i didn't separate code because there was no problem with old version. And with that new version if its not separated doesn't work. Now works fine. Link to comment Share on other sites More sharing options...
Jonathan Posted November 27, 2019 Share Posted November 27, 2019 Hi @Dejan and Welcome to the GreenSock Forum! If you cant separate that code and its in a global JS file.. Any reason you don't want to just add an if statement around that part of code so it doesn't run on that page? You can do an if check against the element or the page to see if it exists or is null. Using your above example to check if element is not null: gsap.registerPlugin(CSSRulePlugin, AttrPlugin, CSSPlugin); var tl = gsap.timeline({smoothChildTiming: true}); //check if .linija-development exists in DOM before running var linijaDevelopment = document.querySelector(".linija-development"); if(linijaDevelopment !== null){ //gsap tween goes here tl.from(".linija-development", {duration: 2, attr: {x1:2000, x2:2000}, scale:0.2, transformOrigin:"center", autoAlpha:0}); } I forked your above codepen with the element exists check for null: See the Pen GRRbVzx?editors=1010#0 by jonathan (@jonathan) on CodePen Happy Tweening Resources: null: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null 3 Link to comment Share on other sites More sharing options...
Dejan Posted November 27, 2019 Author Share Posted November 27, 2019 Thanks i did that i wrapped a code in if statement if(location.href === "https://www.identitet021.rs/home/") Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 15 minutes ago, Dejan said: Thanks for help i didn't separate code because there was no problem with old version. I thought @GreenSock fixed that, but it looks like this might be a separate issue. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted November 28, 2019 Share Posted November 28, 2019 Yep, it should be resolved in the latest beta, https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js. Does that work better for you? 1 Link to comment Share on other sites More sharing options...
themepunch Posted December 9, 2019 Share Posted December 9, 2019 I thought @GreenSock fixed that, but it looks like this might be a separate issue. On my side the beta file worked well. If there is anything else i can see i will let you know ! Thanks a lot for your effort and update ! As Always, brilliant Support and Great Product ! Cheers, Krisztian 1 Link to comment Share on other sites More sharing options...
muruhuay Posted January 12, 2023 Share Posted January 12, 2023 Hello, I have a similar problem, I tried a piece of code and when changing the version it destroys the animation: with this the animation worked <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> and not with these <script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js" ></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" ></script> the code is simple: html <div class="container"> <div class="caja"> <div class="ball"> <div class="btn"> <p>►</p> </div> </div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box box2"></div> </div> </div> script function coolAnimation() { gsap .timeline({ defaults: { duration: 4, delay: 0.5, repeat: -1, stagger: 0.5, ease: 'elastic.inOut(3)' } }) .to('.box', { opacity: 1, rotation: 360, scale: 0.8, borderRadius: '50%', y: 50 }) .from('.box', { duration: 1, opacity: 0, scale: 0.2, y: 100 }); }; let btn = document.querySelector('.btn'); btn.addEventListener('click', () => { coolAnimation() }) btn.addEventListener('click', () => { gsap .timeline({ defaults: { duration: 0.5, ease: 'elastic', repeat: -1, yoyo: true } }) .to('.ball', { scale: 0 }) .to('.ball', { scale: 1 }) }) Could you tell me what is happening? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 12, 2023 Share Posted January 12, 2023 Hi @muruhuay, It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Also you should not use the CDN and Codepen's links at the same time, just use the CDN link: <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" ></script> Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted January 12, 2023 Share Posted January 12, 2023 That animation code looks very strange to me.... You're creating a bunch of conflicting tweens that are fighting for control of the same property of the same elements (scale). You've got a .from() tween that's LATER in a timeline, affecting the same properties as the one right before it (opacity, scale and y). But remember that .from() tweens render IMMEDIATELY by default, thus your later from() tween will affect the starting values of your earlier to() tween. So it sure looks like the problems you're running into have to do with the logic of how you've set things up rather than the version of GSAP you're loading. An older version may have contained a bug that was fixed in later versions which affected the behavior. But fundamentally, you should definitely fix the logic problems first. If the problem persists, we'd be happy to look at a minimal demo showing the issue. 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