elegantseagulls

Hi @dlsmoker, I think what you're missing the the pause play functionality. So something like: const tl = gsap.timeline({ paused: true }); // inside button click function tl.play(); // inside close overlay function tl.pause(0); As for ScrollTrigger, that functionality is built into it. So animations are automatically played/paused there. I'd highly recommend looking over the docs, and learning center: https://greensock.com/docs/ https://greensock.com/learning/

It looks like maybe you have some ordering issues (your call should probably be right before the .pause()), but in your .call you are calling the play function as: playTheVideo(videoAsset3, animationTl), this will trigger the play right away (instead of at the .call). For the call you'd need to just call playTheVideo no () and then pass the parameters separately (See: https://greensock.com/docs/v3/GSAP/Timeline/call()) or setup a function inside the call to run playTheVideo.

ScrollTrigger.getAll('myID').forEach(st => st.kill(););

It must?... I've never had an issue importing it this way, and we run Next.js with most of our projects.

What does your import look like? For nextjs you'll need to import the umd version: import gsap from 'gsap'; import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

You might find this useful: https://greensock.com/docs/v3/GSAP/Timeline/eventCallback() Also: https://codepen.io/ryan_labar/pen/zYrPqpj

It's hard to say without a working demo. I'd wonder if your scroll var isn't scoped globally (if you're calling it from a different file). NOTE: UPDATED FOR ACCURACY - per Zach's response below. Also have you tried: ScrollTrigger.getAll().forEach(st => st.kill(););? What version of GSAP/ScrollTrigger are you using?

This would be the correct setup for setting up an animation separate from your scrollTriggers. (Also, you don't necessarily need a .timeline() for your second tweens.) To be noted: This setup will not prevent your ScrollTrigger tweens from being fired at the same time as your first timeline, as multiple timelines don't fall into succession. If you wanted to make sure the first timeline played before your scrollTriggers you could use an onComplete callback function on your first timeline to setup the scrollTriggered animations..

I checked your CodePen and it's still only using the height attribute. It needs both height and width. I added <img alt="demo" class="lazyload image" height="720" width="1280" src="https://unsplash.it/1280/720?image=100" data-srcset="https://unsplash.it/1280/720?image=100" /> as the images on your code pen, and get the expected results.

The reason for adding the width and height to the img tag has nothing to do the actual height and width of the image. The problem is that the pre-loaded placeholder doesn't have the same aspect ratio as your images because it doesn't know the width AND height. I think you'll find this article useful: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ From the above article: You may also, for semantics and better SEO, want to use something with the picture element wrapping the image. I didn't fully suss out this article, but it looks like it should get you in the right direction: https://dev.to/stefanoverna/how-to-offer-responsive-progressive-images-in-2020-in-one-line-5fed

Without using both the width and height attributes on the img, there's no way for any tool to determine what the responsive dimensions are going to be before the imagse are loaded. In your demo it appears you're only setting the height to 100 with no width attribute. Also, lazysizes seems a bit overkill for lazyloading on scroll, when you could use ScrollTriger to do the same thing without loading another library or adding another scroll event listener function (or if you don't like that, using intersection observer, would also cut your code/lib dependency down).

Hi @Kayoshi You'll need to duplicate the box, and likely will want to use the modifier plugin to set the position. This page in the docs should help, as there are some examples similar to what you're looking to achieve: https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin

or just use this to stop conflicting tweens: https://greensock.com/docs/v3/GSAP/gsap.killTweensOf()

As mentioned in my first response, I think the bug is due to the tween still running (not being paused or killed) after the close is clicked, so the delay is still being animated. Have you tried setting the tweens as a variable and killing them so that the delay isn't trying to run after the close is clicked? Something like this: const sideMenuBackground = document.querySelector(".sideMenu__background"); const sideMenu = document.querySelector(".sideMenu"); const openTL = gsap.timeline({paused: true}) openTL .fromTo(sideMenuBackground, {width: "0px"}, {width: "324px", duration: 0.2} ) .fromTo(sideMenu, {display: "none", opacity: 0}, {display: "block", opacity: 1, duration: 0.2, delay: 0.2}, 0 ); const closeTL = gsap.timeline({paused: true}) closeTL .fromTo(sideMenu, {display: "block", opacity: 1}, {display: "none", opacity: 0, duration: 0.1} ) .fromTo(sideMenuBackground, {width: "324px"}, {width: "0px", duration: 0.2, delay: 0.1}, 0 ) const handleAnim = () => { if (menuCheckbox) { closeTL.pause(); openTL.play(0); } else { openTL.pause(); closeTL.play(0); } } If you wanted to define everything in the click function, you could then use the kill function instead of pause, then you wouldn't need to set the play() at play(0), but would be setting new tweens/timelines (as you are currently) with every click.

Definitely check out the docs on the V3 Syntax changes too. Particularly: ease (now strings), duration (now defined inside the object), and no more need to use TweenMax (everything is just gsap eg: gsap.fromTo(el, { x:0 }, {duration: 0.2, x: 100, ease: 'none'})).