OSUblake

Do you have any more code to share? A minimal demo would help, but this sounds more like a CSS issue.

It's not. You have a loop that is selecting every line in the document. $(".text-block p").each(function(p, i){ var p = $(this); var mySplitText = new SplitText(p, {type: "lines",linesClass: "line"}); var chars = mySplitText.chars; var lines = mySplitText.lines; introTxt_TL.fromTo('.line', // !!! this will animate every `.line` {}, {}); }); Maybe this? introTxt_TL.fromTo(lines, {}, {});

That doesn't sound like scrolling, more like pseudo scrolling via mouse wheel events and gestures. ScrollTrigger is designed to work with the browser's native scrolling behavior. You need to choose the right tool for the job. In your case, I don't think ScrollTrigger is the right tool. That doesn't mean you shouldn't use GSAP, it just means you need to take a different approach. Check out these threads for ideas about how to handle this...

I LOVE IT!!! Seriously, great job.

There is no durationTime. Just duration. var duration = 2.5; if ($(".gb").length) { var hb = gsap.timeline(); hb.fromTo( ".b-content", { opacity: 0 }, { duration, opacity: 1 } ); } Or like this. var durationTime = 2.5; if ($(".gb").length) { var hb = gsap.timeline(); hb.fromTo( ".b-content", { opacity: 0 }, { duration: durationTime, opacity: 1 } ); } Also, you only need to call .play() if the animation is paused.

You can use the DrawSVGPlugin on a mask to reveal the trail. @PointC has a lot of great tutorials on MotionTricks that would be worth going through. https://codepen.io/PointC/pen/c07761a17f94434f1229e11e798f1a3d

Not sure what you mean by free scroll... maybe pin? Did you go through the docs and the demos?

Maybe these pens by @mikel can help point you in the right direction. As I said earlier, this is going to involve some custom JavaScript. This forum is for help with gsap's API, not for building projects. https://codepen.io/mikeK/pen/qBqEeMj https://codepen.io/mikeK/pen/xxgJqpp

But you usually don't need to access those values because the CSSPlugin automatically applies them for you. tween.js const box = document.querySelector("#box"); const coords = {x: 0, y: 0}; const tween = new TWEEN.Tween(coords) .to({x: 300, y: 200}, 1000) .easing(TWEEN.Easing.Sinusoidal.Out) .onUpdate(() => { box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`) }) .start(); gsap gsap.to("#box", { x: 300, y: 200, duration: 1, ease: "sine" });

Elements are little different because the value is part of the style object. GSAP has a helper to get those style values for you. https://greensock.com/docs/v3/GSAP/gsap.getProperty() gsap.to("#Poker_presentaciones", { duration: 5, x: 500, onUpdate() { console.log(gsap.getProperty(this.targets()[0], "x")); } }); Using the getter function. const element = document.querySelector("#Poker_presentaciones"); const getter = gsap.getProperty(element); gsap.to(element, { duration: 5, x: 500, onUpdate() { console.log(getter("x")); } }); If you're animating an array of values, this should work for you. gsap.to(n3i, { endArray: n3f, duration: 1.5, ease: "sine.inOut", onUpdate() { camera.position.x = n3i[3]; camera.position.y = n3i[4]; camera.position.z = n3i[5]; camera.lookAt(n3i[0], n3i[1], n3i[2]); camera.far = n3i[6]; camera.updateProjectionMatrix(); } });

There are still issues for dealing with code blocks. https://github.com/Microsoft/TypeScript/issues/19573 I think for it to work you would have to put it directly above each line with an error. gsap.to(".dots", { physics2D: { // @ts-ignore velocity: 'random(200, 350)', // @ts-ignore angle: 'random(80, 100)', } });

How about this? gsap.to(".dots", <any>{ physics2D: { velocity: 'random(200, 350)', angle: 'random(80, 100)', } });

The same way you would in CSS. ScrollTrigger.matchMedia({ "(min-width: 961px)"() { ... }, "(min-width: 480px) and (max-width: 960px)"() { ... }, "(max-width: 479px)"() { ... }, }) And check out this post on how to DRY up your code.

The second animation never plays. One problem is that your logic isn't correct in assuming that because you have 2 animations that 0.5 is the progress dividing line. That would be true if both animations had the same durations, but the duration of first animation is a little longer because of the stagger delays. This thread will probably help you out. There are several different variations to achieve what I think you're trying to achieve.

Like this... const obj = { x: 0 }; gsap.to(obj, { x: 1, duration: 1.65, onUpdate() { console.log(obj.x); } }); Or this... const obj = { x: 0 }; gsap.to(obj, { x: 1, duration: 1.65, onUpdate() { console.log(this.targets()[0].x); } }); Note that's assuming the obj is not an element.

There's no documentation for something like that. It's going to require some custom JavaScript. And what do you mean click? Do you mean click anywhere on the path and have the bike go there? If so, that can be extremely complicated. Or do you mean click on visible points on the path, and have the bike move there? Like predetermined points? That's a little bit easier.

Perhaps you meant to use duration? gsap.to(".foo", { x: 100, duration: 2.5 });

It would have to be fixed somehow. https://codepen.io/osublake/pen/WNpwrEx

And yes.

Nice catch! I'm guessing this will also throw an error? velocity: gsap.utils.random(200, 650, true) Well get that fixed in the next release. You should be able to ignore any errors putting this above the problem line. // @ts-ignore

If you're repeating code, that probably means a function could help you out. Like you could pass in the duration.... ScrollTrigger.matchMedia({ "(min-width: 800px)"() { const animation = createAnimation(5); // Return a function that'll get called when the breakpoint no longer matches so we can kill() the animation (or whatever) return () => animation.kill(); }, "(max-width: 799px)"() { const animation = createAnimation(1); return () => animation.kill(); } }); function createAnimation(duration) { return gsap.fromTo( "h1", { yPercent: 300, autoAlpha: 0 }, { yPercent: 0, autoAlpha: 1, duration: duration, ease: "none" } ); } The solution by @_Greg _ is good. The only suggestion I would make is to not use resize event listeners as they will constantly fire on every resize. Media query listeners will only fire when the media changes. const animation = gsap.fromTo( "h1", { yPercent: 300, autoAlpha: 0 }, { yPercent: 0, autoAlpha: 1, duration: 1, ease: "none" } ); const mql = window.matchMedia("(min-width: 801px)"); mql.addEventListener("change", onChange); onChange(mql) function onChange(e) { if (e.matches) { animation.duration(5); } else { animation.duration(1); } }

I think should work better for you. NEVER create an animation inside a function like that with React. It will lead to problems later on once you start introducing state changes. const tl = useRef(); const wrapperRef = useRef(null); useEffect(() => { tl.current = gsap.timeline() .fromTo( wrapperRef.current, { x: "-100vw" }, { x: 0, ease: Cubic.easeInOut } ).reverse(); return () => tl.current.kill(); }, []); const toggleMenu = () => { tl.current.reversed() ? tl.current.play() : tl.current.reverse(); };

The only problem I see is your use of .from() tweens. When you click a button before the animation finishes, it's going to create an animation from -769.87 to whatever x is at that time. If you want it to animate to 0, then you should use .fromTo() tweens. https://greensock.com/docs/v3/GSAP/gsap.fromTo()

I think you might need to treat that like a camera. The concept is fairly simple. If your object moves forward 100 units, then you would move its container back 100 units. The same goes for the y axis. This would need to be done on every update. https://codepen.io/osublake/pen/LYYJNmQ

You can use base. That's the value to start from. amount gets added to that, so this will go from -20 to 20... rotation: gsap.utils.distribute({ base: -20 amount: 40, axis: "x", grid: grid, }),