Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dejan

Problems with transition to gsap v3

Recommended Posts

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 post
Share on other sites

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:

 

 

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites
18 minutes ago, Dejan said:

If this doesn't help i will make pen tomorow.

That'd be great! Minimal demos are very useful.

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites
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.

 

image.png.6a40b8686c76296a2594b8c622dafcc1.png

 

 

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites
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?

 

  • Like 2
Link to post
Share on other sites
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 }
});

 

 

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

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

 

  • Like 3
Link to post
Share on other sites

Thanks i did that i wrapped a code in if statement

if(location.href === "https://www.identitet021.rs/home/")

 

Link to post
Share on other sites
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.

 

 

 

 

  • Like 2
Link to post
Share on other sites

 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

  • Like 1
Link to post
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.

×