Jump to content
Search Community

Unable to import

Marci test

By Marci
in GSAP

Moderator Tag
 Share
Go to solution Solved by mvaneijgen,

Recommended Posts

Marci test

Marci

Posted
Posted

Hello!

I am all new into programming and gsap. I have no idea why but I am unable to properly import gsap and ScrollTrigger. I tried CDN and downloaded content. The download works better but still I can not achieve my goal. 

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="main.js"></script>
</head>

<body>

  


  <video autoplay loop muted controls="true" autoplay="autoplay" src="Rolls.mp4" type="video/mp4" id="rollsvid"></video>
 
  
 
</body>

</html>
 #rollsvid::-webkit-media-controls {
  display: none !important; /* Webkit-based browsers */
}

#rollsvid::-webkit-media-controls-play-button {
  display: none !important; /* Hide the play button specifically */
}

#rollsvid::-webkit-media-controls-start-playback-button {
  display: none !important; /* Hide the start playback button specifically */
}


body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  z-index: 0;

}

#rollsvid {
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
}
import { gsap } from './js/gsap.min.js';
import { ScrollTrigger } from './js/ScrollTrigger.min.js';

gsap.registerPlugin(ScrollTrigger);

gsap.to("#rollsvid", {
  scrollTrigger: {
    trigger: ".video-container",
    start: "top top",
    end: "bottom bottom",
    scrub: 1,
  },
  scale: 2,
  opacity: 0,
});

This my whole code. I saved the video Rolls.mp4 so it is basically the only thing that works. I saw other people making 'div' and stuff but since I am really new into this I am pretty lost. However the biggest problem is that I am unable to import the gsap and ScrollTrigger even though I downloaded and imported everything properly. It always has some problem (errors like:SyntaxError: The requested module './js/ScrollTrigger.min.js' does not provide an export named 'ScrollTrigger' (at main.js:2:10)  and doesn't work. The point would be that when scrolling the video gets bigger and the opacity decreases so it reveals what is behind it which is basically a black screen. I have no idea what my errors are. I guess half of my code is incorrect. Someone could help this noobie out? 

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

In order to use imports like that with the module attribute you have to either use the UMD files you can find in the download files in your dashboard or you can use Skypack like this: 

  <script type="module">
    import gsap from "https://cdn.skypack.dev/gsap";
    import ScrollTrigger from "https://cdn.skypack.dev/gsap/ScrollTrigger";

    console.log(gsap.version); // -> 3.12.2
    console.log(ScrollTrigger.version); // -> 3.12.2

    gsap.registerPlugin(ScrollTrigger);
  </script>

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites
Marci test

Marci

Posted
  • Author
Posted

Thanks, now it could import it however the effect still doesn't work no idea why. The point would be that as I scroll the video stays at the same place but gets scaled up and the opacity decreases revealing what is behind it (which is basically the black background-color of the "body" in css). 

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="main.js"></script>
</head>

<body>

  

<div class="video-container">
  <video autoplay loop muted controls="true" autoplay="autoplay" src="Rolls.mp4" type="video/mp4" id="rollsvid"></video>
</div>
 
</body>

</html>

my css is the same as before 

import gsap from "https://cdn.skypack.dev/gsap";
import ScrollTrigger from "https://cdn.skypack.dev/gsap/ScrollTrigger";

console.log(gsap.version); // -> 3.12.2
console.log(ScrollTrigger.version); // -> 3.12.2

gsap.registerPlugin(ScrollTrigger);

gsap.to("#rollsvid", {
  scrollTrigger: {
    trigger: ".video-container",
    start: "top top",
    end: "bottom bottom",
    scrub: 1,
  },
  scale: 2,
  opacity: 0,
});

as I told you I am a real noobie in this yet. I do not know maybe the video should get pinned or something. It doesn't write me any errors anymore but still the desired effect doesn't work. What should I add or correct in my code that it does the effect what i described above? Thanks a lot for the help in advance!

Link to comment
Share on other sites
mvaneijgen test

mvaneijgen

Posted
Posted

Hi @Marci, can you create a minimal demo for us, so that we can dive directly into the code and see what is going on. Having code snippets is not really showing the whole issue, because we are missing CSS in this case, which is really important when working with GSAP and it could be what is causing your issue. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites
Marci test

Marci

Posted
  • Author
Posted

I am really new to this as I said the css is in my forst message, didn’t change since then. I include my whole code since all of it is needed to create this effect, I guess. So the css is in my first message and the html and js is in the the second one because I changed some things since the second one. I am not an easy case I know, really sorry for that. If I would create a minimal demo it would contain exactly the same code what I provided this why I thought it may not be needed. So 2nd message html and js and in my first message you can find my css. This is my whole code but everything is only for this effect what I described above. Thanks a lot for your support!

Link to comment
Share on other sites
  • Solution
mvaneijgen test

mvaneijgen

Posted
  • Solution
Posted

Hi @Marci, ok I've copied your code to a Codepen, seen that you're new here. But that is really not a service we can provide on these free forums, we like to help as many people, but if we have to start creating minimal demo's for everyone we will not be able to help as may people, so please keep this in mind and next time.

 

✨ A demo speaks 1000 words ✨

 

I've removed your body `overflow: hidden;` ScrollTrigger uses the scrolling of the page to do its effect, also I've removed your `transition: transform 0.3s, opacity 0.3s;` You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

 

In your JS I've set `end: "bottom top"`, you had set it to `end: "bottom bottom"` and your start to `start: "top top"` and because your video was 100vh the animation would have ended as soon as it started. Lastly I've set `pin: true`, so the animation stays pinned for the whole duration.

 

Check out this awesome tutorial that really shows how you should work with ScrollTrigger:

 

 

Again if you had provided a minimal demo we would have seen all of your issues in seconds and that would have saved everyone a lot of time. It is not to be mean, but we like to help as many people on these forums, so it really helps us, help you if you provide a minimal demo. 

 

Hope it helps and happy tweening! 

 

See the Pen mdvJBrM by mvaneijgen (@mvaneijgen) on CodePen

 

 

 

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...