Text color + scroll animations

[JsF]

Hi, I just learned about GSAP today. 

 

I've got 2 questions:

 

1. How do I achieve this? : 

I'm guessing I need something like:   gsap.to("#textid",{duration:1, repeat:-1, x:200}) but somehow have it only affecting the text color gradient. I tried searching in the doc - words like background, text color, etc., but had no luck.

 

2. 

See the Pen WxNdvq by michalsnik (@michalsnik) on CodePen

I've got the basic animation working with a simple gsap.from({}) but I just don't know how to make it trigger based on scrolling. Also tried searching the doc with words like scroll but this too, had no results.

 

Thanks in advance!

See the Pen YpERQQ by shshaw (@shshaw) on CodePen

[ZachSaucier]

Hey JsF and welcome to the GreenSock forums. We hope you've enjoyed GSAP so far!

 

11 hours ago, JsF said:

How do I achieve this? :

I'm guessing I need something like:   gsap.to("#textid",{duration:1, repeat:-1, x:200}) but somehow have it only affecting the text color gradient.

This approach would work if the text and gradient are separate elements because x applied to DOM elements is shorthand for transform: translateX() which moves the whole element. For it to only move the background, you need to animate the backgroundPosition instead, like so:

 

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

 

However, animating background-position has some performance issues and background-clip: text isn't supported in IE so if you're using this in production you may want to use a different approach depending on your audience and needs.

 

11 hours ago, JsF said:

I just don't know how to make it trigger based on scrolling

It looks like they're triggered on scrolling to me Maybe you updated the pen?

[JsF]

Ah, thank you! I knew I had the right idea when I tried searching the GSAP doc with background as the keyword when trying to do the text gradient.

 

For the scrolling one, that codepen isn't mine and it uses https://michalsnik.github.io/aos/ . I'm just trying to figure out how do it using purely GSAP. Does GSAP have something like gsap.trigger()? As you can tell, I'm terrible at finding stuff in the doc. I couldn't find backgroundPosition even though I tried using the search bar with words like background.

Anyways, here is my terrible simple codepen of what I've got so far. I just need to tie the animation to a trigger or something: 

See the Pen KKwdgWV by julian_s (@julian_s) on CodePen

[ZachSaucier]

It's easy to setup an animation, have it be paused on load, and run it using the Intersection Observer API:

 

See the Pen aLxmJp by PointC (@PointC) on CodePen

These demos use GSAP 2, but can easily be converted to GSAP 3.