Jump to content
Search Community

Total newbie: I need tutorials with html exercise files.

InspireUX test

By InspireUX
in GSAP

Moderator Tag
 Share

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

InspireUX test

InspireUX

Posted
Posted

Hi,

 

I'm a newbie to using GreenSock. My level of JS and CSS knowledge is rather limited.

I've purchased the PRO license as well.

 

Using Codepen to try out the effects is great, but I'm at a loss when trying to figure out just how it all needs to be included in a HTML file.

Just copy pasting the code from codepen doesn't seem to help in anyway.

 

Are there tutorials with html (+css ) exercise files that I can take a look at and play with so I can understand how this works and use it?

 

Here's an example of what I've tried so far, with little luck.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html 5</title>
ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

    <style>
body {
  margin:10px;
}

.box {
  display:block;
  width:200px;
  height:200px;
}

.green {
    background:green;
     width:200px;
  height:200px;
}
</style>
</head>
<body>
    <h2 class="title">TweenMax.to() Basic Usage</h2>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box green"></div>

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

<script type="text/javascript">
function animateIt(){
TweenMax.to("h2.title", 1, {opacity:0.3});
TweenMax.to(".box", 3, {x:300});
TweenMax.to(".green", 3, {rotation:360, scale:0.5});
//use the defaults
TweenLite.to(element, 1, {scrambleText:"THIS IS NEW TEXT"}); 
 
//or customize things:
TweenLite.to(element, 1, {scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}});    

Get an all-access pass to premium plugins, offers, and more!

JOIN THE CLUB

}
animateIt();
</script>
</body>
</html>

Link to comment
Share on other sites
Dipscom test

Dipscom

Posted
Posted

Hi InspireUX,

 

Welcome to the forums!

 

Are you asking about general web-dev tutorials?

 

FreeCodeCamp is a rather good and compreensive site full of tutorials.

 

There are a ton of other ones that are free/paid or free with a paid option:

 

https://www.codecademy.com/

https://www.udacity.com/

https://www.khanacademy.org/computing

https://wesbos.com/

 

And I could go on... Youtube is also crammed with people showing how to's and the such.

  • Like 3
Link to comment
Share on other sites
explorerzip test

explorerzip

Posted
Posted

The code you copy out of CodePen is missing tags like DOCTYPE, head, etc, These are needed in a HTML file to work in a browser. Codepen is a prototyping tool mainly and it doesn't include these tags to make it faster for a developer to write up something quick. That's why you can't simply copy code straight out of CodePen and into a code-editor. The bare minimum HTML markup you need will look something like this: http://htmlshell.com/

 

I'm surprised you purchased a Club Greensock plan because almost all of the tools are free. You definitely don't need the bonus tools to learn. You don't need the bonus tools to do a lot of production work either. In terms of learning GSAP, have a look at https://ihatetomatoes.net/ for some free tutorials. You can also find him on YouTube. You can also learn the basic of HTML, CSS and JS at https://www.w3schools.com/

 

There are a number of issues with the HTML code you pasted.

 

1. The line: "ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" will only show text in the browser. This is how you link to an external css file:

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">

 

Even with the correct syntax, this external css file would not do anything because you did not load the Jquery UI plugin:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The thing is you actually don't need the Jquery plugin for most projects.

 

2. These lines: "Get an all-access pass to premium plugins, offers, and more!" "JOIN THE CLUB" will cause an error in your browser's inspector because they are not valid javascript. I think you were trying to write a comment so you'll have to have to type "//" in front of your text. In most code editors like Sublime Text, the line will change colour so you know that it's commented out.

 

3. These lines will not do anything and will cause errors in your browser inspector because there is no "element" object in your HTML code.

 

TweenLite.to(element, 1, {scrambleText:"THIS IS NEW TEXT"}); 
TweenLite.to(element, 1, {scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}});    

 

Speaking of the browser inspector, you need to get comfortable using that tool to debug problems in your code. When you have any browser open, press the F12 key (it could be a different key in Internet Explorer, Edge, etc) to bring up the browser inspector. You can also right click anywhere in the browser window and select "Inspect". You'll see an an Elements or Inspector tab that shows you how the browser has interpreted the HTML document aka the Document Object Model or DOM. There's also a Console tab that will show errors.

 

4. You didn't define a background colour for your grey and orange boxes, which is why you can't see them.

 

Here's how I did it

 

See the Pen jRWqqP by explorerzip (@explorerzip) on CodePen

 

  • Like 1
Link to comment
Share on other sites
PointC test

PointC

Posted
Posted
2 hours ago, explorerzip said:

I'm surprised you purchased a Club Greensock plan because almost all of the tools are free. You definitely don't need the bonus tools to learn. You don't need the bonus tools to do a lot of production work either.

 

True, the core tools are free to use, but I think it's pretty great when someone new jumps into a Club GreenSock Membership to help support the platform. I always think of the power being in the core, but the fun is in the plugins. DrawSVG, MorphSVG, ThrowProps, SplitText and Custom Wiggle & Bounce are also huge time savers in production work. Plus, there's never any risk since GreenSock offers a money back guarantee if you're not completely satisfied.

 

@InspireUX welcome to the forums and thanks for your support. Let us know if you have any GSAP questions as you go through all the learning materials. Happy tweening.

:)

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