Jump to content
GreenSock

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

TweenMax not working

Recommended Posts

As the title says, I cannot move any element anywhere. The code is not working. Here is my HTML code

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PC's VS Consoles</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- The following link is not linking to a css file.
<link href="https://www.dafont.com/atarian-system.font" rel='stylesheet' type='text/css'>
-->
</head>
<body>
<div class="bg-image"></div>
 
<section class="slide-one">
<h1>PC's vs Console</h1>
<div class="slide-one-images">
<figure class="img-PC"><figcaption>Gaming PC</figcaption><img src="PC-thumbnail.jpg" alt="PC"></figure>
<div class="img-Hammer"><img src="Hammer-thumbnail.jpg" alt="TheHammer">
</div>
<figure class="img-Xbox1"><figcaption>console</figcaption><img src="Xbox1-thumbnail.jpg" alt="Xbox"></figure>
 
</div>
<p>Ah, the old gaming PC versus video game console debate. Each have their merits, and each have<br> their own league of fans who vehemently swear by one or the other.
        At the end of the day, it's all<br> about personal preference.
        Sure, it's true that gaming consoles are easier for casual gaming on<br> the couch, but there are 4 good reasons why gaming on a PC can be better than playing on a console.<br>
        Check it out:
        </p>
 
</section>
 
 <img class="Arrow" src="RedDownArrow.png" alt="DownArrow">
 
<section class="slide-two">
<h1>1. You can play games with better graphics than consoles — <br>if you have a powerful gaming PC</h1>
<p>This is one of the main arguments in favor of PC gaming, as the hardware inside a gaming PC can far outperform<br> the parts in a console like the Xbox One or PlayStation 4. As a result, games on PC can play with graphics settings<br> set to higher levels, as well as play at higher, smoother frame rates, than that on a console.
        With that said, gaming PCs<br> that outperform consoles can come at a high price. A great gaming PC for 1080p resolution screens can cost anywhere north<br> of $500.
        </p>
        <div class="slide-two-images">
        <img class="img-PCGraphicsComparison" src="PCGraphicsComparison.jpg" alt="Comparison">
        <img class="img-PcVsPS4" src="PCVsPS4.jpg" alt="PC VS PS4">
        </div>
 </section>


 
<section class="slide-three">
<h1>2. The Steam game platform</h1>
<p>Steam is a platform where, among other things, you can browse, buy, and launch your games, and it's better than<br>the stores on Xbox One and PlayStation.
        For one, game sales are superior on Steam. During a sale, you can get older games <br>for a significant discount compared to console stores. For example, I bought saved about 90% on the game "Dying Light"<br> during a sale compared to the $60 it costs from the Xbox store.
        Microsoft and Sony have made great strides with sales<br> and discounts, but the deals will rarely be as good as you'd find on Steam.</p>
        <div class="slide-three-images">
        <img class="img-Steam" src="Steam.svg" alt="Steam">
        <img class="img-SteamDashboard" src="SteamDashboard.png" alt="Dashboard">
        <img class="img-SteamDashboard2" src="SteamDashboard2.jpg" alt="Dashboard2">
        </div>
</section>
 
<section class="slide-four">
<h1>3. You don't have to pay to play multiplayer games on PC,<br> and you save money in the long run</h1>
<p>To play multiplayer games on console, you have to sign up for the paid Xbox Live and PlayStation Network services,<br> depending on which console you own. PC gamers don't need to pay to play games online.
           For a year of service, an Xbox Live<br> Gold or PlayStation Plus membership costs $60. That may seem like a trivial annual expense, but it builds up over the years.<br>
           After paying $60 for five years or membership to either service, you would have paid $300.That's money you could spend on a PC<br> graphics card upgrade.</p>
        <div class="slide-four-images">
        <img class="PlayStationPlus" src="PlayStationPlus.jpg">
        <img class="Live" src="XboxLive.jpg" alt="Live">
        </div>
</section>
 
<section class="slide-five">
<h1>4. You Don't Need to Wait to Upgrade</h1>
<p>PC gamers can replace their computers' GPUs, CPUs, RAM, and storage at their conveniences.
        This ability <br> is an attractive PC gaming element, as it directly impacts your gameplay experience in terms of resolution<br> and frame rates.
        For example, my Nvidia GeForce GTX 1070 GPU lets my PC run Metal Gear Solid V: The Phantom<br> Pain at 60 frames per second and 1080p resolution, with all the visual settings jacked to maximum.
        <div class="slide-five-images">
        <img class="img-Trash" src="GamesinTrash.jpg" alt="GameTrash">
        <img class="img-Setup" src="PCSetup.jpg" alt="Setup">
        <img class="img-Game" src="Game.png" alt="Game">
</div>
</section>


 
<section class="slide-six">
       
<h1>5. Pick Your Choice</h1> 
<div class="slide-six-images">
        <img class="img-GamePc" src="GamePC.jpg" alt="Game">
        <img class="img-PS3" src="PS3.jpg" alt="PS3">
        <img class="img-RegularXbox" src="RegularXbox.jpg" alt="Regular">
        <h2>VS</h2>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

 

 

I have download the zip file form the website and I don't know if I have to extract them to my project folder, or what. I tried that and that did not work. 

 

This is my main.js code

 

TweenMax.to(".PlayStationPlus"2, {x:600});

 

 

See the Pen JjjYZMM by XxDarkus101Xx (@XxDarkus101Xx) on CodePen

Share this post


Link to post
Share on other sites

Welcome to the forums! It looks like TweenMax is doing exactly what you're asking it to do (move the element with the class "PlayStationPlus" to the right by 600px). 

 

I'm pretty lost as to what exactly you're trying to do and why you think TweenMax isn't working. It looks like you've got a bunch of CSS animations applied to various elements. I'd suggest maybe starting with a much simpler setup, get an element or two animating, and then building on that. If you're still having trouble, could you please give us more info about exactly why you think TweenMax isn't working and what you're trying to do? A much simpler Codepen would also be very helpful. We'd love to assist you...I'm just not sure what you're asking. 

  • Like 1

Share this post


Link to post
Share on other sites

Oh nvm sorry i'm new to this. Its just that it doesn't move at all on my actual webpage, but on CodePen it does. I don't see how that's possible.

Share this post


Link to post
Share on other sites

Yeah, it's pretty tough for us to troubleshoot blind. If you still need help, please provide a reduced test case that shows it "broken" and we'd be happy to take a peek. 

Share this post


Link to post
Share on other sites

Actually I know why its not working. I read a comment somewhere that I either need a membership, or just copy the cdn which I did and its still not working. It works on CodePen though for some reason.

Share this post


Link to post
Share on other sites

You don't need a Club GreenSock membership for TweenMax to work. That's only if you need the bonus plugins, none of which are essential for most animation. Certainly not for what you're doing. There must be something else going on with your page on the live (non-codepen) version. 

Share this post


Link to post
Share on other sites

I really don't know. It works perfectly on CodePen and I copied the CDN url code to the HTML code but still nothing. 

Share this post


Link to post
Share on other sites
2 hours ago, XxDarkus101Xx said:

I really don't know. It works perfectly on CodePen and I copied the CDN url code to the HTML code but still nothing. 

 

What makes you think GSAP is the problem? Do you see any errors in your console? That should be your first step.

 

And is this the correct path?

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

 

Go to your codepen demo and click the "export" button in the bottom-right side of the screen. Unzip it, and run the index.html in the dist folder. It should work. 

  • Like 1

Share this post


Link to post
Share on other sites

Why would there be images? You have to add them to your project with the correct path.  

 

 

  • Like 1

Share this post


Link to post
Share on other sites

oh crap silly me, I forgot to do that. They are working now. The animations in the index are working but not my project. Guess i'll just have to work on this and paste everything to my project when i'm done.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×