[Revealing w/ stagger chars GSAP Scrolltrigger]

Thanks a lot @Rodrigo this solved my problem !

[Revealing w/ stagger chars GSAP Scrolltrigger]

Hello there,

 

I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). 

 

I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here.

 

Anyway I'm opened to suggestions, thanks for your help folks

 

Olivier

See the Pen poxKKdq by olig (@olig) on CodePen

[GSAP + Lenis smoothscroll - scrolling to anchor breaks tweens]

I wanted to add to the solution that when you scroll back up you can't just do .progress(0). You also need to reverse the scrolltriggers array because you may get styles added from timelines tweening values after the previous one. Full code here : 

 

_this.previousScroll = window.scrollY;
window.lenis.scrollTo(
	href,
	{
		immediate: true,
		onComplete() {
			let scrollTriggers = ScrollTrigger.getAll();

			if (_this.previousScroll > window.scrollY) {
				scrollTriggers = scrollTriggers.reverse();
			}

			scrollTriggers.forEach((st) => {
				if (st.animation) {
					if (window.scrollY > st.start) {
						st.animation.progress(1);
					} else {
						st.animation.progress(0);
					}
				}
			});

			_this.previousScroll = window.scrollY;
		}
	}
);

 

[GSAP + Lenis smoothscroll - scrolling to anchor breaks tweens]

Ok solved :

 

Deleted `refreshPriority` and added condition if window.scrollY > scrolltrigger instance then go to end of animation with .progress(1)

 

 

[GSAP + Lenis smoothscroll - scrolling to anchor breaks tweens]

Hi @GreenSock,

 

I'm sorry I was in a rush and needed first insights. I now have a demo running : 

 

See the Pen ExdXwJa by olig (@olig) on CodePen

 

You'll see that when you click on "References" and scroll back up, all the styles are mixed up. But when you scroll down as usual all the styles apply and at the end you only have one screen left before the section references appear.

 

I tried killing the tweens but that doesn't work either.

 

Thanks for your help

 

 

[GSAP + Lenis smoothscroll - scrolling to anchor breaks tweens]

Hi everyone,

 

I'm using Lenis smoothscroll and I have lots of scrollTrigger timelines that are triggered with toggleAction and scrub.

 

They work fine when I wheel scroll down my page but when I click on an anchor to immediately go to my section, previous timelines do not finish properly, I have styles that are not added/removed only on the ones triggered with toggleAction.

I tried forcing the animations to the end like below, but that doesn't work.

 

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener('click', (e) => {
        e.preventDefault();
        const href = anchor.getAttribute('href');
        if (href === '#') {
            return;
        }
        window.lenis.scrollTo(
            href,
            {
                immediate: true,
                onComplete() {
                    const scrollTriggers = ScrollTrigger.getAll();
                    scrollTriggers.forEach((st) => {
                        if (st.animation) {
                            st.animation.progress(1);
                        }
                    });
                }
            }
        );
    });
});

 

What am I doing wrong here ? Thanks for your help.

[ScrollTriger Video scrub play ?]

For anyone coming across this post. One solution is discussed here : 

 

[Scrolltrigger snap - how does it work ?]

Hi Jack @GreenSock, yes that's exactly what I wanted. Thank you very much.

 

I'm confused, I really thought the snap breakpoints had to go from 0 to 1. It's written no where in the docs that breakpoints can be higher than 1.

 

I thought the snap was related to the progress of the scrolltrigger tween and I can't understand the math and what it is in relation with. Can you point this out please ?

 

Thank you

Olivier

[Scrolltrigger snap - how does it work ?]

Hi,

 

I'm having trouble getting scrolltrigger snap to work. I understand when you have div/sections that are the same width/height that its 1 / total - 1. But what happens when the sections are not the same width. I made a codepen to illustrate how I think it works building an array of snap points - obviously I'm wrong but I can't figure out why.

 

Help appreciated. Thanks !

See the Pen BarMpWR by olig (@olig) on CodePen

[Split text confused]

I'm sorry Cassie what codepen exactly is the solution ?

[Split text confused]

Hi Jack @GreenSock,

 

Did a codepen to illustrate the fact that the snippet above doesn't work with strong tags :

 

See the Pen yLKGjym by olig (@olig) on CodePen

[Flip + Swiper slider]

Hi everyone !

 

I'm having a hard time simply moving a slider into a lightbox with the Flip plugin. All the examples given seem so easy but I must be missing something because the result if somewhat pecular...

 

Thanks for your help 

See the Pen zYpLqXP by olig (@olig) on CodePen

[Simple scrollproxy with Smooth-scrollbar horizontal scroll]

Hi @akapowl !

 

I'm trying to do the same thing now but with toggleClass. I've just modified the demo for buttons to toggle from red (not in viewport) to green (in viewport) but it doesn't work. What am I missing out here ?

 

 

Thanks a lot

[Simple scrollproxy with Smooth-scrollbar horizontal scroll]

OMG !

 

You're right thank you very much !

[Simple scrollproxy with Smooth-scrollbar horizontal scroll]

Hi,

 

I have a horizontal scroll using the Smooth-scrollbar library. I'm trying to do a simple rotation on a square by using GSAP ScrollTrigger's proxy but I can't get it to work.

 

What am I missing out here ?

 

As always thanks a lot for your help !

 

 

 

See the Pen VwjYZLw by olig (@olig) on CodePen

[Can you pause and resume a ScrollTrigger animation?]

Awesome thanks

[Update/Refresh start value after pin spacer added]

Hi Paul,

 

Thanks for the help, it solved my problem. Sorry for that I'll check into these mistakes, I didn't even know I was making one.

 

Cheers

[Update/Refresh start value after pin spacer added]

Hello,

 

I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added.

 

Thanks for your help

See the Pen OJNKKKx by olig (@olig) on CodePen

[Can you pause and resume a ScrollTrigger animation?]

@ZachSaucier Could we do the same with the kill function ? like trigger.kill(false); ?

[Snapping animated text on SVG path w/ ScrollTrigger]

Hi @mikel, @ZachSaucier,

 

Thank you very much for your feedbacks. It helped me a lot to get where I wanted to go !

 

 

[Snapping animated text on SVG path w/ ScrollTrigger]

Hi everyone,

 

I've managed to animate text on an SVG path but I can't manage to make the animated text arrive in the center of the screen when the snap stops. It either stops before or after the center. I'd tried to mess with the snapTo without success.

 

Thanks for your help

See the Pen OJNKKKx by olig (@olig) on CodePen

[Don't animate offscreen elements]

Makes perfect sense.

 

I just forked the Horizontal snapping demo that has the same logic : 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

In the demo, elements offscreen are still animated.

[Don't animate offscreen elements]

Hi there !

 

I have a horizontal scroll in place with Scrolltrigger. I was wondering if it was possible to disable animating elements when they're out of the viewport for performance matter ? Juste like Locomotive scroll : https://locomotivemtl.github.io/locomotive-scroll/

 

Thanks for your feedback

 

 

See the Pen GRZORvX by olig (@olig) on CodePen

[ScrollTrigger - Horizontal Scroll w/ variable width sections]

Ok so I think I managed to solve it - like this : 

See the Pen GRZORvX by olig (@olig) on CodePen

 

Code:

 

const sections = gsap.utils.toArray("section");
let maxWidth = 0;
sections.forEach((section) => {
  maxWidth += section.offsetWidth;
});

gsap.to(sections, {
  x: () => `-${maxWidth - window.innerWidth}`,
  ease: "none",
  scrollTrigger: {
    trigger: ".wrapper",
    pin: true,
    scrub: 1,
    end: () => `+=${maxWidth}`
  }
});

 

I'm not really sure if my code is optimized so critics welcomed !

[ScrollTrigger - Horizontal Scroll w/ variable width sections]

I would be interested in knowing how you fixed this. 

 

Thanks !