Marci
Marci's Achievements
-
-
-
Rare
-
Rare
-
Rare
Recent Badges
0
Reputation
-
Hello, So I'm doing a website with GSAP and one of my videos also has sound which is connected to ScrollTrigger. I decided to add the controls to the video but the problem is that when scrolling down only the controls appear but not the video and if the video and the control appear which I tried with another video I can not start it either mute/unmute it because the buttons are not sensitive. My point would be that while scrolling, when the video reaches a certain opacity it will start playing and if someone clicks the unmute button it eventually unmutes the video. For me it would be the best (if someone knows how to do it) that the video can not be stopped or played manually, the user only has the control over the sound which is muted as default. (In the demo the controls and the video work too however at me the described problem remains, I just created it so you can see what I am speaking about). I hope you understand, it is a bit complicated... Someone could help? https://codepen.io/Drummer20/pen/oNmBoLm
-
Hello Everyone, I am trying to make this animation function:https://codepen.io/GreenSock/pen/oNpPwaV. It actually work well, however the problem is that I can not implement it in my website. I have a video and I want this to be below so exactly at top: 3800px. How should I vary the code or what should I do with it to put it to this "top" so below my video (this video also uses ScrollTrigger and pin but I guess it doesn't interfere into anything)? Thanks for all responses!
-
Thank you very much for your efforts. I will make a minimal demo next time if I have any questions absolutely understand your point. Wish you a nice day!
-
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!
-
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!
-
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?