Is it possible to explain how I use code editor vs with gsap?

[Eylon]

Hello I took the study course on the site but the examples are with codepan, when I try to do the code in the code editor vs code I fail.
I am adding a cdn link to index.html and the link that is meant for the effect, but gsap still does not work.
Is it possible to explain how I use code editor vs with gsap?

thanks.

[Trapti]

Hey, Welcome to the forum!

I do not think the issue is with code editor vs with GSAP.  Please check browser console see if there is any error. Check if GSAP is loading properly in the network tab of devtool.
Scripts can be added this way before body tag ends in case that's the isssue. 

<script type='text/javascript'  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script type='text/javascript'  src="main.js"></script>

If above things are fine, then check the GSAP code if there is issue with that. 

 

[akapowl]

Welcome to the forums Eylon!

 

In addition to what Trapti mentioned, here is an example for a rather basic folder structure to help you get started.

 

Maybe having a look at the index.html will help you get a clearer picture.

Basic Start.zip

[Cassie]

Also, any pen on codepen can be exported as a zip file and opened in vs code

Bottom right, export > export .zip

 

Hope this helps. 

[Eylon]

6 hours ago, Trapti said:

Hey, Welcome to the forum!

I do not think the issue is with code editor vs with GSAP.  Please check browser console see if there is any error. Check if GSAP is loading properly in the network tab of devtool.
Scripts can be added this way before body tag ends in case that's the isssue. 

<script type='text/javascript'  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script type='text/javascript'  src="main.js"></script>

If above things are fine, then check the GSAP code if there is issue with that. 

 

Thanks for the help :)!

I do not understand: if I write a point (  .   ) before the tag that is  "class" and not an "id" in another file it does animate but here no.
If I try to register
gsap.to (".p-frontend", {x: 400})
To move all the pictures it does not animate
If I try to register the name of the image: .p-frontend-img-html,  it still does not animate
I still can not animate the following code, I will share what I write, thank you if you recognize what is wrong with the code:

I will share the code if needed also the picturesindex.htmlindex.html

 

 

  <div class="p-frontend" dir="rtl">

    <ul>

        <li> <img class="p-frontend-img-html" src="/images/fullstack/html.png" alt=""></li>

        <li><img class="p-frontend-img-css" src="/img/fullstack/css.png" alt=""></li>

        <li>  <img class="p-frontend-img-js" src="/img/fullstack/js.png" alt=""></li>

        <li>  <img class="p-frontend-img-bootstrap" src="/img/fullstack/bootstrap.png" alt=""></li>

        <li>  <img class="p-frontend-img-photoshop" src="/img/fullstack/photoshop.png" alt="">  <img class="p-frontend-img-figma" src="" alt=""></li>

        <li>  <img class="p-frontend-img-gsap" src="/img/fullstack/gsap.svg" alt=""> </li>

        <li>  <img class="p-frontend-img-react" src="/img/fullstack/react.png" alt=""></li>

    </ul>

</div>

  <img id="time" src="images/time.png">

</div>

 

<!-- GSAP 3-->

  <script src='js/gsap/gsap.min.js'></script>

 

<!-- my custom animation script that I wrote -->

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

 

in js file:

 

gsap.to("p-frontend", {x:400})

[Trapti]

There is no problem with code except gsap.to(".p-frontend", {x:400}). "p-frontend" is the container class so entire container will move by 400.