Jump to content
Search Community

Embarrassingly basic

ianben test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

This is so basic I am almost too embarrassed to post it but if I want to get started with this I need to understand this first hurdle I encountered.

I am using Dreamweaver and have established my folder etc. Following the "Getting Started" video I set up the page, a javascript and CSS page and copied the Download link into the page. When I started to enter "TweenMax" into the js page Dreamweaver didn't recognise it and has thrown up an error warning on the first line of code. Could you please look at what I have done and advise? 

Greensock.zip

Link to comment
Share on other sites

Hello @ianben and Welcome to the GreenSock Forum!

 

Sorry your having an issue! What does your html <head> tag looks like with the included scripts. For GreenSock TweenMax you should just be able to include from cdn so its cached and loads faster.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

 

Place that in the <head> of your HTML page or right before the ending </body> tag. Then place your custom GSAP code below that

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="/js/custom-gsap.js"></script>

Or if you dont want a custom external script than just do this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script>
  // custom GSAP code goes here
</script>

 

Does that help?

 

If not please provide some code or create codepen so we can better help you, Thanks :)

  • Like 3
Link to comment
Share on other sites

This is all I have so far:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Greensock test</title>

<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="/js/custom-gsap.js">
    </script>
</head>

<body>
    <div class="box"></div>

    <script src="main.js"></script>
</body>
</html>

 

So where do I start adding the TweenMax code then?

Sorry for being dense on this but I really don't know where to start!

Link to comment
Share on other sites

Hi @ianben :)

 

Welcome to the forum.

 

As @Jonathan mentioned, you can either load your custom js file or put it directly on the page. If you want it directly on the page, just add the tweens between your script tags like this:

<script>
 TweenMax.to(yourElement, 1, {. . .}) // your tweens or timelines etc...
</script>

 

It's not much different for an external script. You just create a JavaScript file and add your tweens, timelines, etc to it. Save it in your js folder and then load it as @Jonathan mentioned above. If it's an external file, you don't include the opening and closing <script> tags in the external file.

<script src="/js/custom-gsap.js"></script> // name it anything you like

In either case, just make certain you've loaded TweenMax before you load your custom file or scripts with your tweens.

 

Does that help?

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

A couple corrections and you'll be up and running.

 

Your custom JavaScript file is named with an underscore, but you're trying to load it with a hyphen. 
 

// switch this
<script src="js/custom-gsap.js"></script>
//to this
<script src="js/custom_gsap.js"></script>

 

The tween in your JS file is missing a comma after the duration. 

// switch this
TweenMax.to(".convoy", 2 {left:500})
// to this
TweenMax.to(".convoy", 2, {left:500});

 

Finally, you'll need to set your class positioning to relative or absolute. Add this CSS to your page:

<style>
    .convoy {
        position: relative;
    }
</style>

 

If you make those changes, everything should work correctly.

 

Just an FYI - you can create a free CodePen account and it will be much easier to help you with future questions and/or problems.

 

Happy tweening.

:)

  • Like 3
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...