Jump to content
Search Community

GSAP - Uncaught TyperError: U is undefined from the cdn gsap.core js file

Abdul Majeed test

By Abdul Majeed
in GSAP

Moderator Tag
 Share
Go to solution Solved by Abdul Majeed,

Recommended Posts

Abdul Majeed test

Abdul Majeed

Posted
Posted

image.thumb.png.0e2da4b9762c33788b655d4b44223946.png

 

My GSAP cdn file showing this error, i dont know why, kindly help me to fix this

cdn link: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js

 

My HTML code is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HERO SECTION</title>
 
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
 
    <link rel="stylesheet" href="hero.css">
</head>
<body>
    <nav>
        <h1 class="logo">Nature.</h1>
    </nav>
    <div class="hero-section">
        <img src="hero.jpg" alt="hero" class="hero-img">
        <div class="cta">
            <div class="cta-text">
                <h2><span class="cta1">One</span></h2>
                <h2><span class="cta2">Stop</span></h2>
                <h2><span class="cta3">Shop</span></h2>
            </div>
            <div class="cta-text">
                <h2><span class="cta5">One</span></h2>
                <h2><span class="cta5">Stop</span></h2>
                <h2><span class="cta6">Shop</span></h2>
            </div>
            <button class="cta-btn">Explore</button>
        </div>
    </div>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" ></script>
    <script src="hero.js" ></script>
</body>
</html>

 

My hero.js Javascript code is below:

const tl = gsap.timeline({
        defaults: { duration: 0.75, ease: "Power3.easeOut" },
});
 
tl.fromTo('.hero-img', {scale: 1.3})
Link to comment
Share on other sites
  • Solution
Abdul Majeed test

Abdul Majeed

Posted
  • Author
  • Solution
Posted

Hi , Problem fixed, I edit my js file hero.js

 

Before the hero.js file was look like this below:

const tl = gsap.timeline({
        defaults: { duration: 0.75, ease: "Power3.easeOut" },
});
 
tl.fromTo('.hero-img', {scale: 1.3})

 

I noticed in this tl.fromTo  i mentioned the from (Scale: 1.3) but i Forget to add To (Scale: 1), once i put the code like this below, My problem solved

const tl = gsap.timeline({
        defaults: { duration: 0.75, ease: "Power3.easeOut" },
});
 
tl.fromTo('.hero-img', {scale: 1.3}, {scale: 1})
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...