Jump to content
Search Community

Problems with transition to gsap v3

Dejan test
Moderator Tag

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

  • 2 weeks later...
  • 3 years later...

 

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

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

That animation code looks very strange to me....

  1. You're creating a bunch of conflicting tweens that are fighting for control of the same property of the same elements (scale). 
  2. 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

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...