ZachSaucier

Hey kohlej and thanks for the clear demo and your attempt at a solution! That's very helpful.
 
I recommend making use of the fact that ScrollTrigger can recalculate properties of your tween on resize so long as you tell it to using invalidateOnRefresh: true and a functional value for the property you want to change, like so:

See the Pen PobYWoO?editors=0010 by GreenSock (@GreenSock) on CodePen

Hey Schweinedog. Thanks for supporting GreenSock with a Club GreenSock membership!
 
A few notes:
You don't need the new keyword when creating timelines. You might benefit from GSAP 3's defaults functionality. You might benefit from GSAP 3's random functionality (don't have to write your own). As for your question, since in this case you want a different random value for each repeat but not each target, I'd probably make use of the onRepeat callback along with some variables like so:

See the Pen ExNYazp?editors=0010 by GreenSock (@GreenSock) on CodePen

Hey battleaxe10000 and welcome to the GreenSock forums.
 
You're right, it is due to the scrub. The only way to fix this while keeping the scrub is if you use smooth scrolling on the entire page (using scrollerProxy to hook it up). 
 
The speed is determined by
The total distance that you need it to travel (not really change-able unless you didn't want full screen sections) The total distance of your ScrollTrigger. The scrub value that you have. That's another reason to use smooth scrolling.

Hey Reagan. If I open your demo then click the center button the monkeys are shown with a stagger animation from the center most monkey. 
 
With that being said, there is a logic issue if you click on any button before a previous button finishes. You're using a relative .from() tween each time which means that the end state will be the one when the button is clicked. That's actually one of the most common GSAP mistakes. There are a few ways of fixing it, but probably the easiest would be to use .fromTo() tweens instead.

Hey Ali. A function call is just a function call. You can't reverse a function call. Additionally it doesn't make much sense to use two timelines to do what you're doing - you should probably just use one timeline.
 
Often times it's best to not rely on class names and CSS transitions for your animations. Using GSAP for all of your animation will give you far more control and keep all of your animations in a central location. Animating everything with GSAP will also prevent you from making some logical errors/creating conflicts. 
 
With that being said, if all you want to do is toggle multiple classes with a ScrollTrigger along with some pinning I would set it up this way:

See the Pen XWjLoKV?editors=0010 by GreenSock (@GreenSock) on CodePen
 
If that's not what you're trying to do, please make a new demo that reflects more closely what you're trying to do.

If you want the movement to be truly circular, you could create (or dynamically create) circles with radii large enough to go from one slot to every other slot. Then move the objects along the circular path. 
 
You could dynamically create paths using cubic beziers.
 
You could animate the x position with a normal ease and also do a separate yoyo tween for the y value to a given height and then back to 0.
 
There are probably some other methods that I'm not thinking of.

We believe that this issue should be fixed now. Can you all please try uninstalling GSAP then installing it via the private npm registry as specified in the installation instructions?

Believe it or not, setting a height of images using the width and height attributes is often times good practice because it prevents layout shifts. You can still size images with CSS but setting their intrinsic size with their attributes is very helpful if you know them ahead of time. 
 
With that being said, if you don't know the size of your images, it would probably be best to use their load event(s) to refresh ScrollTrigger so that the position of things update. You could either do this after all of the (relevant) images have loaded or after each image loads. You can determine which is best for you given situation.
 
There are different ways to do that depending on the end effect that you want. You could use a single ScrollTrigger that pins a container with the animation attached. Or you could create two ScrollTriggers, one for the pinning and one for the animation, with different start and end positions. If you do two ScrollTriggers you should create them in the order they are reached on the page.

We recommend doing so. Why would you want to keep it? The new syntax is better  There are other updates as well that you can read about in the linked articles.
 
If you want the onDrag function to be called as well you should call it separately: https://jsfiddle.net/mt6eukdz/

Hey justcasper and welcome to the GreenSock forums.
 
I'd probably use a liveSnap function instead of array since you need it to update on resize. I'd probably set it up this way: https://jsfiddle.net/fpLyx0ro/

Hey justcasper. As covered in the release notes, className tweens were removed from GSAP. What are you trying to accomplish? Just adding a class? I'd use the classList API for that:
elem.classList.add('newclass');  

To do this, you will need to calculate where the scrollbar should go given an anchor click. I show how to do that sort of thing in these posts:
You'll need to apply the technique to your situation though  
 
I'd probably make your gsap.to(sections tween a part of a timeline, apply the ScrollTrigger to said timeline, and add to that timeline additional tweens for your additional translations.

My guess is that your element is "heavy" meaning takes time to render. And since scrolling is handled in a different thread than the main JS one, they can't be perfectly synced. That's why anticipatePin exists to try and handle the transition between pinned and non-pinned as best as we can.
 
If all that you're doing with the ScrollTrigger is pinning it perhaps you can get away with just using position: sticky.
 
I don't know that we can be of much more help, especially without a minimal demo that recreates the issue.

Hey litash and welcome to the GreenSock forums.
 
You're using a very old version of GSAP. We highly recommend upgrading to GSAP 3! It has a smaller file size, a sleeker API, and a bunch of new features. Additionally we don't support ScrollMagic in these forums. Instead, we recommend the official scroll plugin: ScrollTrigger! It's better in every way  
 
I recommend that you get started by going through the GSAP 3 migration guide, the ScrollTrigger docs, and then perhaps start from one of the many ScrollTrigger demos. 
 
Then, if you have a specific question related to GSAP, feel free to ask and we'll do our best to help out.

This has nothing to do with ScrollTrigger. You're positioning your inner div 500px from the top of the container. So if the viewport height is not at least 500px + height of the content, it will not fit in its container since the container has a height of 100vh. ScrollTrigger does not change elements heights when you pin it. It just keeps it in the same position.

Hey DMIND. Thanks for the clear demo.
 
After looking at your demo I had a guess that the child ScrollTrigger was being created before the scrollerProxy. Adding a delay proved that that guess is correct (or at least it works around whatever issue it's having). I am not very familiar with React, but perhaps there's a more React way of making sure that the necessary JS runs in the correct order?

You put the onStart in the fromVars but it (and all properties that are not of your object) should be in the toVars. Moving it fixes your issue:

See the Pen KKgJQLW?editors=0010 by GreenSock (@GreenSock) on CodePen

Hey darkgr33n. As you likely know already, the issue is that you have unresolved conflict. I'm guessing you want to kill off the old timeline if there's a new one. Something like this:

See the Pen ExgGdrp?editors=0010 by GreenSock (@GreenSock) on CodePen
 
Side notes:
It probably makes sense to use a single timeline instead of 3 for each so it's easier to manage. You can have sub-timelines if you want to. I'm not sure why you're creating your timelines paused then immediately playing them. You should use the position parameter instead of delay when putting tweens in timelines because it's easier to manage. You've got a lot of unused variables. You also attach variables to the objects themselves a fair bit, which I'm not sure if you need to do. Take note of how I structured your variables.

Hey pitchweiss and welcome to the GreenSock forums. 
 
I don't know anything about socket or Animate, but that error means that this.timeline inside of your socket listener is undefined. That's because this inside of that event listener function is not the same as this outside of the event listener.
 
Perhaps you can fix it by saving a reference to what this is?
var myThis = this; socket.on('show baIN', function() { myThis.timeline.addTween(cjs.Tween.get(myThis.baIN).wait(23).to({_off:true},1).wait(24)); });  

Hey mikel. This is because of font kerning, which we can't really work around programmatically. As covered in the docs, add font-kerning: none to .line to remove kerning and fix the issue.

So sorry. I just realized I had a typo in the GSAP install command that I provided here in the forum post. It had an extra :. It should be:
yarn add gsap@npm:@gsap/shockingly Hence your "isn't supported by any available resolver" error.
 
FYI I'm using the same version of Yarn to test with.

Here's some untested code:
var btnUp = document.getElementById("button-up"); var tween; btnUp.addEventListener("mousedown", function() { tween = gsap.to("#map", { yPercent: "-=10", duration: 1, repeat: -1, repeatRefresh: true }); }); btnUp.addEventListener("mouseup", function() { tween.kill(); });  

Hey trifectaty and welcome to the GreenSock forums. 
 
The core of your approach is a very good one but some of the details could definitely be improved.
It's better to animate y or yPercent rather than top/bottom.  It's better to disable and enable instead of killing and recreating. In general it's better to use bounds rather than liveSnap to restrict movement but I understand if you don't want to in this case since bounds is based on the parent's positions. Altogether:
var $draggable = $(".draggable"); var $header = $(".header"); var draggable; initDraggable(); function reset() { gsap.set($draggable, { y: 0, yPercent: 0 }); draggable.enable(); } function initDraggable() { draggable = Draggable.create($draggable, { trigger: $header, type: "y", edgeResistance: 0.2, liveSnap: { y: function (y) { if (y < 0) return 0; // Restricts dragging to down return y; } }, onDrag: function () { $(".yPos").html("y: " + this.y); if (this.y > 60) { // if this threshold is met animate it off screen - pull down to dismiss! this.disable(); // Without this no animation animateOut(); } } })[0]; } function animateOut() { gsap.to($draggable, { yPercent: 100, duration: 1, ease: "circ" }).then(reset); } Happy tweening!

I answered this in my last post:
 
Putting that logic into a demo: https://jsfiddle.net/4v5ar7m2/

Hey Andres and welcome to the GreenSock forums.
 
Sure, it's possible. You just need to create a timeline inside of the effect and return the timeline. Demo.