[Pinned section throwing off subsequent scrolltriggers]

Since you're pin contains your next animation, it's not longer tied to a viable scroll position. You might look at this for its "containerAnimation" or "isInViewport":

 

[scrolltrigger onLeaveBack doesn't fire when i scroll too fast]

You have overflow hidden on your html/body, but are trying to use window.scrollTo, which is contradictory. Have you looked at using GSAP's scrollTo functionality/plugin? I also see multiple scroll bars in the CodePen, so I'm guessing that's also causing an issue.

For your end value you spelled 'center' incorrectly, and your end value is triggering before your start value the way you have it setup.

[ScrollTrigger Horizontal scroll not working in Mobile devices (Small screens)]

#designExt {
  max-width: 100vw;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}

Updating the css to this seemed to work for me, unless I'm misunderstanding your question.

You shouldn't need to limit the overflow on the body.

[ScrollTrigger section glitch]

Your fromTo needs more information, but it looks to me like you can just use a to animation for this. Example:

 

gsap.to(
  ".right-door",
  {
    opacity: 0.85,
    scrollTrigger: {
      trigger: ".right-door",
      scrub: true,
      start: "top top"
    },
    xPercent: -50
  }
);

 

[Struggling to add ScrollSmoother to a ScrollTrigger using a previous function]

I'm not seeing that error in the CodePen... I'm using FireFox.

[FLIP plugin and 3D]

Exactly what I was looking for! Thanks!

[scrollTo and remove() element.]

I think that's just browser behavior for when you remove content in Safari... I'd suggest also manually setting your scroll position immediate after you remove the content.

[React and GSAP timelines callbacks]

3 hours ago, Daniel Hult said:

How would you play the timeline after all the child instanses are created without the interaction like clicking the button?

Removing the button and taking the paused: true off the animation seems to play the animation just fine.

The nature of setting things up like this, it's hard for React to know how many children/sub-children there are. That said, we set something similar to this up a long time ago, but I'm having trouble re-piecing it together in my head... this was when we were using pure components and lifecycles instead of hooks.

[How do you manage animation timeline across next app?]

You can setup animation components and import those into your other components in to avoid repeating code.

Also, we've found using https://greensock.com/docs/v3/GSAP/gsap.registerEffect() and making the effects into hooks works pretty well across bigger projects.

[SplitText Headers Flicker (Flash Briefly into View) on Page Transition]

Looks like maybe fouc to me? You'll want to set your initial css property to visibility: hidden; Better details here:

 

 

[How to stop my opacity animation effect, I want my opacity style from 0 to 1 without animation]

Adding ease: 'steps(1)'  to your from and to will fix this, otherwise you can change duration to 0 and add a delay.

[TimelineLite does not work in Angular]

You shouldn't need to use TimelineLite anymore (as of version 3.0). You can now just use gsap.timeline(). Also, you can write eases as strings now, so no need to import those (unless it's a special ease).

More info here:

 

[Horizontal scroll with scrolltrigger DIV bounces up and down]

I cannot replicate with my browsers, but I'd imagine you've got some overflow on another element that's causing the body to try to scroll separately from the scroller in your setup. have you tried removing the overflow-x and overflow-y styles from the .fl-tests class?

[Add Next and Prev buttons to a draggable slider]

You'll want to just add buttons to tween the draggable instance by one snapX...

More clarity can be found here:

and:
 

 

[SteppedEase.config(1) returning undefined in typewriter code (Using Nuxt, mixin, and GSAP ctx)]

Looks like the docs have Stepped ease as:

ease: "steps(1)"

[Problem with scrollTrigger, moving headers/text using gsap.to()]

Using from is probably a better bet for this animation:
to lengthen duration, you'll want to add a duration: to your tweens.

See the Pen NWLmGbO?editors=0110 by elegantseagulls (@elegantseagulls) on CodePen

 

I'm a bit confused as to what you're looking for for "#3"

[FLIP plugin and 3D]

19 hours ago, GreenSock said:

using Flip.fit()

@GreenSock: Is there a way to exclude a transform style in FLIP? The issue I'm now bumping into is my intertia plugin is continuing to transform my FLIP-element's rotationY slightly as it decelerates... I was hoping setting FLIP to simple: true, or disabling draggable would fix, but it seems not to, can I manually set a parameter?

Here's the WIP... It's a bit more complex than my previous demo, but code should hopefully still be pretty easy to follow:

See the Pen LYJaLNx??editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

[FLIP plugin and 3D]

Ugg right in the docs... I should know better! I was looking, but must have glassed over it cause I was hoping to achieve something pretty unique.

[FLIP plugin and 3D]

Exploring the the FLIP plugin some more, and am wondering if it's possible to flip nicely from 3D transforms. Am also wondering why the image in my demo is being flipped vertically when clicked, when there is only a Y rotation on it.

 

Thanks for any insight.

See the Pen LYJawvq?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

[How to make scrollbar for Horizontal Scroll section?]

I think you'll want to use GSAP's Draggable for this (observer may work for this too).
 

This thread may be helpful:

Draggable Docs here:

 

[Tween issue while scrubbing (upwards)]

The issue is nesting multiple ScrollTriggers in a single timeline.
 

 

 

[Only first component gets animated in Next.js]

15 minutes ago, Rodrigo said:

The issue is that you're using as a trigger a class selector withou scoping it, so basically you're using all the elements with the class ".wrapper":

Beat me to it! You'll also likely be able to remove the refs for span and header. And, since all the targets are being scoped now from the wrapper ref (Thank you gsap.context!) you can add a generic class to target rather than setting a unique id for each (unless you need that elsewhere).
 

import { useRef, useEffect } from "react";

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

const Sectionheader = ({ span, head, id }) => {
  const wrapperRef = useRef()

  useEffect(() => {
    if (!wrapperRef.current) return;
    gsap.registerPlugin(ScrollTrigger);
    const ctx = gsap.context(() => {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: wrapperRef.current,
          toggleActions: "restart reset restart reset",
          markers: true, 
          start: 'top bottom',
          end: 'bottom top'
        }
      });
      tl.from('gsap-span', {
        y: 30,
        opacity: 0,
        duration: 1,
        delay: 0.5,
        skewX: 3,
        ease: "power2.easeIn"
      }).from(
        '.gsap-head',
        {
          y: 30,
          opacity: 0,
          duration: 1,
          skewX: 3
        },
        +0.7
      );

    }, [wrapperRef.current]);

    return () => ctx.revert();
  }, []);
  return (
    <>
      <section ref={wrapperRef}>
        <p className="gsap-span">
          {span}
        </p>
        <h2 className="gsap-head" >
          {head}
        </h2>
      </section>
    </>
  );
};

export default Sectionheader;

 

[How to connect scrolltrigger to react?]

It looks like you aren't importing ScrollTrigger or registering it.
 

import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

 

[How to get a non-looping value from ScrollTrigger onUpdate when you reach a section.]

Does onEnter instead of onUpdate work?
 

onEnter: check,
onEnterBack: check,  

onToggle could also be useful, depending on your use.

 

onToggle: (self) => {
  self.isActive ? console.log(self.trigger.dataset.id) : null;
},

More info on the callbacks here: https://greensock.com/docs/v3/Plugins/ScrollTrigger

[Gsap 3D rotation question]

The gsap/scrollTrigger objects would look something like this:

gsap.to(el, {
  transformOrigin: '50% 0',
  rotateX: '50deg',
  scrollTrigger: {
    target: hero,
    start: 'top bottom'
    end: 'bottom top',
    scrub: true,
  }
})

You'll also want to make sure to set a perspective value in your CSS to the parent div.