JimmyK

Hey man, thanks for the reply! I tried out your method, and it works great for what I want to achieve. However, I do have a problem, and it occurs on your codepen example too. Sometimes it pauses the video randomly. It especially happens when the whole sequence has been played through and I wanna play it again. Not sure what is causing this, or if there is a fix. Once again, thanks for your help, you are a true wiz.

Hey everyone. Is there any way to animate a video so that if for an example a button is pressed, it will play 2 seconds of the video, and then pause the video again? And then when another button is pressed, it will play another two seconds of the video? Any help is appreciated. Thanks!

Hey there. I created a new pen with only the relevant parts. This is basically all there is to the animation. If there is any alternative way of creating such animation I'd love to know. What is weird is that it works flawless on mobile Safari, but is super laggy on desktop Safari. It does not lag in the codepen, but you can see on the live site if you browse through safari how it is lagging a lot. (Literally like 100px per second) UPDATE: I found a solution, it was a Lottie animation who were interfering with the animation, thanks for the help!

Hey there, thanks for replying! Here is a link to the live page, so you can see. -- -- As you can see it works as it should in all browsers on mobile version, and all browsers but Safari in desktop version.

Hey guys. I just launched my new website. All my vanilla JS animations are super smooth. And my GSAP animation is smooth in every other browser like Firefox, and Chrome. But in Safari it is super laggy, like instead of being smooth is clips 4 times, so it increases 25% each time. None of my other elements does this, so I do not think that this is a general problem on the site. And the animation is like super subtle so I can't see why it would cause such a lag. I am new to GSAP. I put a codepen URL, I haven't pasted the whole styling in, but I pasted all the GSAP js in so you can get a sense of what I have done. UPDATE: I found a solution, it was a Lottie animation who were interfering with the animation, thanks for the help!

Hey guys. First post here. I'm a graphic design and front-end student out of Zealand, Denmark. We are only learning JQuery at my school, but I am a hard learner, so I am looking for other options. I am currently learning vanilla JS, and randomly found this amazing library. So far everything has been super awesome. I'm facing one issue though. I am animating the height of an image. I added an AddEventListener, as I want the animation to start at a specific point on my site. Basically what I want to do is to animate the photo when it reaches the destination of the position. I have other things attached to the Eventlistener which works as it should. But my image keeps restarting when I scroll. Is there anything I can do to have it animate the height and then stick to that height even when I scroll. I tried adding repeat: 0, and I tried to add an onComplete. I have lots of code that works as it should. So I'll just paste the code I have issues with: function scrollAppear(){ const macbook = document.querySelector("#macbookLight"); const mbPos = macbook.getBoundingClientRect().top; const imagePos = window.innerHeight /1.5; if(mbPos < imagePos){ const tl = gsap.timeline(); tl.fromTo(macbook, 2, {height: 0}, {height: 500}); } } window.addEventListener("scroll",scrollAppear); I'd appreciate any help I can get, I have been searching Google without any luck. Thanks!