elegantseagulls

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.

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.

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.

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

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

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:

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?

You'll want to just add buttons to tween the draggable instance by one snapX... More clarity can be found here: and:

Looks like the docs have Stepped ease as: ease: "steps(1)"

Using from is probably a better bet for this animation: to lengthen duration, you'll want to add a duration: to your tweens. https://codepen.io/elegantseagulls/pen/NWLmGbO?editors=0110 I'm a bit confused as to what you're looking for for "#3"

@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: https://codepen.io/elegantseagulls/pen/LYJaLNx??editors=0010

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.

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.

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:

The issue is nesting multiple ScrollTriggers in a single timeline.

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;

It looks like you aren't importing ScrollTrigger or registering it. import ScrollTrigger from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger);

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

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.

I'd imagine this is cause it's an absolute value and once it rotates to that value (transform: rotate(-170deg)) it's trying to just tween from that value to that value, so it's not doing anything. Maybe try a relative value using += or -= eg: rotation: '-=170',.

Also, have you tried the useLayoutEffect(() => {},[]) hook? It sounds to me like ScrollTrigger is trying to calculate things before the layout is done rendering (with it working on resize). Or make sure to check if your ref is available in the dom before running your function. This may also be helpful with this (useIsomorphicLayoutEffect):

Not sure what your dev structure looks like, but you could put the headerItem tl after the standardAnim() function call. That way if that function is there, it'll put that into the timeline before it looks at the headerItem addition to the timeline. If you can't do that, you could do something like: const tl = gsap.timeline(); const headerTL = gsap.timeline() const standardTL = gsap.timeline() const headerItem = $(".category-header__item") headerTL.to(headerItem, { ease: 'back', autoAlpha: 1, duration: 10, }) function standardAnim() { standardTL.to('.category-bg__standard', { autoAlpha: 1, scale: 1, duration: .6 }, '<') .from('.category-standard__item', { ease: 'slow', autoAlpha: 0, scale: 0, duration: 1.8 }) .from('.category-title', { ease: 'slow', autoAlpha: 0, y: 70, duration: 3.4 }) } if($('.category-standard')[0]) { console.log('Standard') standardAnim() } tl.add(standardTL).add(headerTL)

I think this would be a good use case for function-based values:

The wavy effects on that site are built with WebGL, likely using something like: https://www.curtainsjs.com/ You could also consider get a similar effect if you animate an SVG filter over an embedded image... Something like: https://codepen.io/osublake/pen/WQyBJb but with a different filter shape.

The issue with this is that the horizontal animations are technically part of the scroll. If you try to skip these sections, you'll either have to pass a large blank space (the space the horizontal scrub is actually scrolling when pinned) or you'll have to re-flow the page, which is really difficult to calculate the current/previous/future scroll positions, and browsers don't like to repaint things like this, so there'll likely be some glitchyness.