Jump to content
Search Community

TweenMax not working

XxDarkus101Xx 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

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

Link to comment
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
Link to comment
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
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...