PointC

Oh, I wasn't doubting the accuracy of jQuery.position. I just don't use jQuery much and getBoundingClientRect() spits back eight properties so I find it more useful. But if your code above is working as you'd like, go for it. No need rocking the boat. Happy tweening.

When I want to measure containers and landing spots, I always go with .getBoundingClientRect(). https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

I guess I'm not fully understanding this whole project. Why do you need to clearProps between tweens? It seems like you want the next tween to start where the last one ended. Wouldn't a sequenced timeline of .to() tweens work well for this? Or am I missing something obvious?

The master can have onComplete and each nested timeline can have its own onComplete callback.

I see. That sounds more like a sprite-sheet animation. For that I'd probably go with a backgroundPosition and stepped ease. There are a bunch of threads about that. Here's a good one: I don't see anything in your code that would cause the second timeline on the master to start immediately. (Just FYI — the immediateRender:false is not necessary for the .to tweens). That's why I'd like to see demo. It doesn't have to be all your actual assets. Just some plain divs is fine. Here's a starter with your code pasted into the JS panel. You can fork this and drop in some divs as placeholders for the actual elements. https://codepen.io/PointC/pen/QRbxLQ

I'm not quite sure I follow what's happening here with the zero duration tweens and toggling visibility. Can you put that into a demo? Thanks.

Welcome to the forum. You have to wait for the tween to complete. https://codepen.io/PointC/pen/NVqyPX Happy tweening.

Welcome to the forum. Here's a loop to clone the SVG and uses .insertAdjacentElement() to drop a copy after each h1. Then an each() loop to create your ScrollMagic scenes. https://codepen.io/PointC/pen/oRXoGE Hopefully that helps. Happy tweening.

I've never actually used the jquery.gsap plugin and I rarely touch jQuery so I'm not an authority on either. Generally speaking though, if I wanted to get rid of a DOM element with a running tween, I'd kill() the tween to release it for garbage collection. @GreenSock may be around later with additional info. Happy tweening.

I may start tagging you in all my posts just for the fun of it. ?

Is there any reason you're using jQuery for this? I'd think it would be easier to just use pure GSAP, kill() the tween and get rid of the div with the removeChild() method.

Yep, you can just keep adding to the end of timeline. Or add tweens at any position with the position parameter. https://greensock.com/position-parameter Happy tweening.

You don't want all the symbols to be draggable? You could add a class to the ones you want to drag and create a draggable for that class. SVG is a deep subject so it depends on what you're trying to do, but Sara Soueidan's site has lots of good info to get started: https://www.sarasoueidan.com/tags/svg/ Happy tweening.

Excellent. Glad to hear everything is working for you now. Have fun.

If I understand your desired result here, you don't need to set any timeout. You can just manually add that last tween at the end of the timeline like this. $(".title__sub").each(function(index, element) { tl.to(element, 1, {opacity:1}); tl.to(element, 1, {x:400, opacity:0, ease:Power2.easeIn}, "+=2"); tl.to(element, 0, {x:0}); }) tl.to(".title__sub--1", 1, {opacity: 1}); You also don't need to animate the x position as that was done in the each() loop. Is this what you meant, or have I misunderstood the desired outcome? Happy tweening.

Also — is your custom JS file after you load GSAP?

Are you sure you're loading TimelineMax? I'd recommend loading TweenMax which loads most everything you need. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> Here's a demo that shows the list. https://codepen.io/GreenSock/pen/djXzyR

Correct - one callback for each event type. You can have onStart, onComplete, onUpdate, etc. But if you create a second one for an event, it will overwrite the first.

tween.eventCallback("onUpdate", null);

If you're talking about Draggable — no there isn't an out-of-the-box option that will just do that for you. I guess you'd have to get the width/height of the window or container and keep track of the x/y of the draggable element. Based on that you can then change the transform-origin and squash it accordingly. Happy tweening.

You need TimelineMax to take advantage of features like yoyo and repeat. They are not available in TimelineLite. https://greensock.com/docs/TimelineMax Happy tweening.

Hey everyone, My forum odometer just hit 3,000 posts so here’s a little commemorative demo. I’m always floating around the forum so here’s a bunch of my avatars floating around and forming an invasion armada. Now you can really get tired of me. This is using the new (5.01) version of Pixi along with GSAP, CustomWiggle and the Pixi plugin. The sprites each randomly wiggle a bit in their own little orbit and there are three containers of sprites that move randomly to create a parallax effect. The middle and back containers have a blur and brightness filter applied to simulate a DOF effect. The container blur is a bit tough on mobile devices, so I’d recommend a laptop/desktop for this one. The parallax effect looks best on full screen. You can also have fun tinting the sprites. If you’re fast enough clicking the color swatches, you can create a multi-color armada. Thanks for letting me hang around for 3,000 posts! Happy tweening all.

I'm not sure where you're seeing these phrases and in what context they were used, but I'd say: wrapping: my first thought is wrapping child divs, elements sprites, etc. in a parent. snapping: makes me think of snapping in Draggable clamping: probably clamping a number? https://css-tricks.com/snippets/sass/clamping-number/ I'd say just start Googling when you find something in an article or blog post. If you have specific GSAP questions or problems, we're happy to help. Happy tweening.

Is this what you need? https://codepen.io/PointC/pen/QRwmKw

No worries. I use Draggable quite a bit, but rarely use scrollTop so it took me a few minutes of tinkering too. I'm sure Jack will stop by and drop some knowledge when he gets a chance. Happy tweening.