PointC

I'm not 100% sure as I didn't build that demo, but all the sections are stacked on top of each other so this may be a target/z-index issue. If you add the .ignore class to the header, you see it is indeed ignored.
 
Here's another simple example where I've told the Observer to ignore the .green and .orange targets.

See the Pen cd77c0fbf45bc990d3baf4213529e43f by PointC (@PointC) on CodePen
 
You can see that the ignore works exactly as expected. I didn't have much time to dive too deep into your forked demo to see the exact reason, but maybe @GreenSock can clarify a little bit.
 
Happy tweening.

Hi @Consequence 
 
Thanks for being a Club member. We really appreciate it. 🎉
 
I think I'd wire up a polygon to some Draggables and do something like this. The width and height are dynamic so all you need to do is adjust the w/h variables to your liking. 
 
See the Pen zYRpBbm by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening.

If you don't want to use two elements, it sounds like a good use case for CSS variables.
 

See the Pen ZErvbPR by PointC (@PointC) on CodePen
 
Happy tweening.
 
 

This was just discussed and built in this thread.
 
Happy tweening.

 

So you want the blue target to just follow the sections up and down. Like this maybe?

See the Pen 5fc0b34c5556a20c14682af588926e38 by PointC (@PointC) on CodePen
 
Does that help?

Hi @Tedev 
 
Welcome to the forum.
 
I'm pretty sure that's caused by the ScrollTrigger tween setting its starting value to zero on that first element in the from 0 opacity tween. So, you reverse the ScrollTrigger tween and it goes back to zero. The other three elements in that group of four have their starting opacity set to 0. If you flip one of the blue panels with the red one, you'll see the same thing happen to the first blue panel.
 
Fixes: 
Remove the opacity tween in your ScrollTrigger because it's not doing anything anyway. Switch the order of the tweens  Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct.  
Here's a fork with #2.

See the Pen 40f3539166669a535bddf0860dc34ace by PointC (@PointC) on CodePen
 
Happy tweening and welcome aboard.

 

Hi @nicoleanowa 
 
Welcome to the forum.
 
My recommendation would be to place each steam heart on its own timeline. That way you can repeat one before the other two have finished. I separated the autoAlpha and y tweens since I wanted the autoAlpha to yoyo and fade back out as it hits the end of its movement. You'll see all the durations and repeatDelays are based on the dur variable. That way you can simply adjust one value to your liking.
 
See the Pen 473a8aa94e4274966c383d83bbd3646f by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening and welcome aboard.

 

Hi @Willy Christian 
 
Welcome to the forum.
 
Looks like you have some overlapping media queries. I think you'd want to set a min and max for each one like this:
 
See the Pen f86870c78eec4ef7e0c13e8c3775311d by PointC (@PointC) on CodePen

 
Happy tweening.

 

I don't think there's anything wrong with the way you did it and a few extra ScrollTriggers aren't going to make a noticeable difference. Jack is a performance connoisseur so I trust GSAP and don't get too wrapped up in all things performance until I notice something chugging along. That's almost always going to be a rendering issue though. 
 
The yoyo tween I posted above will have a brief period of time with nothing changing. That's why there is a repeat delay. Say you have the above code with a 1 second tween duration and a 2 second repeat delay. That's a total of 4 seconds. So, the first 25% of the scrub will be the tween to full opacity. 25% → 75% of the scrub is nothing as that is the delay. Then 75% → 100% would be the fade back to the original opacity.
 
Make sense?
 
Happy tweening.

 

You'll need to move those elements outside of your scroll wrapper.
 

See the Pen dfe28e138684e056e0dc54f7fc605d9c by PointC (@PointC) on CodePen
 
 
From the docs under Caveats:
position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.
 
https://greensock.com/docs/v3/Plugins/ScrollSmoother
 
Happy tweening.

 

Hi @ApriSix
 
Welcome to the forum.
 
You're not actually playing that timeline with the play button. You're just calling the function that returns the timeline which is not in a paused state so it immediately plays. I'd recommend assigning that returned timeline to a variable and then you can control it with all the available methods.
 
Something like this:
See the Pen 9a55e829614b45f31e20adf3e04957bd by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening and welcome aboard.

Split your text into lines, loop through those targets and create a ScrollTrigger for each one. Boom - you're good to go. Happy tweening.  

See the Pen 3e64dc369cd5e8a71235b7d123180339 by PointC (@PointC) on CodePen

Hi @coderesolution 
 
You'll need to call ScrollTrigger.refresh().
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()
 
ScrollSmoother doesn't have its own refresh method. (yet)
 
Happy tweening.

 

I'm not sure I follow the question. Do you mean you want the "Hello" and "World" boxes to land perfectly centered on the "Random Text" box?
 

See the Pen a50267e21cfa1e8397e995a7c19ba96f by PointC (@PointC) on CodePen
 
Is that what you meant?

Please give this a try.
ease: condition ? "power4" : "none"
See the Pen ea42ab4e6e542401ef5a8bab653c5b32 by PointC (@PointC) on CodePen
 
If you need it for your project, there's also a parseEase() method.
https://greensock.com/docs/v3/GSAP/gsap.parseEase()
 
Hopefully that helps. Happy tweening.

 

I think I'd limit the number of repeats on the tweens so you can use your timeline repeat and repeatDelay. Maybe something like this:
 

See the Pen 8525298a3d05e41cdde6eafed8768319 by PointC (@PointC) on CodePen
 
Hopefully that helps. Happy tweening.

 

There's a workaround for lines and nested elements here:
 
 
 
Happy tweening.

 

Yep - definitely upgrade to the GSAP3 syntax. Much easier. 
 
You can use separate tweens for that animation and add the position parameter so they start at the same time.
 
If you absolutely need them in the same tween, you can use wrap() for that. Something like this should work.

See the Pen def96988245998df9fe481f47f7d2335 by PointC (@PointC) on CodePen
 
Hopefully that helps. If you need more info, as @mvaneijgen mentioned, a minimal demo would be most helpful.
 
Happy tweening.

If I understand the desired result correctly, I think I'd just use a regular tween instead of a timeline. Then you can call ScrollTrigger.refresh() onComplete of the tween in your click handler. Maybe something like this.
 

See the Pen 8740a24e12a98756ecba99961ab9abee by PointC (@PointC) on CodePen
 
Happy tweening.
 

tween.pause().scrollTrigger.disable();  seems to work fine for me.
 
Happy tweening.

 

Hi @brianrivet
 
It's too complicated to troubleshoot a live site. If you can put something into a minimal demo, we'd be happy to take a look.
 
You mentioned things work after a resize event so perhaps everything isn't loaded when you set up your initial ScrollTriggers? Resizing will fire ScrollTrigger.refresh(), but you could also manually fire it as a test. 
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()
 
That's where I'd start looking, but we're happy to help if you can demonstrate the problem in a minimal demo.
 
Happy tweening and thanks for being a Club member.

 

You could drop it into an SVG and use a clip-path. (Pointer events will only register on the revealed area.) Then add a separate glow image. I'd do something like this:
 

See the Pen QWQLGqY by PointC (@PointC) on CodePen
 
Happy tweening.

 

Hi @Chybosky 
 
It'll be best to use CSS variables to animate pseudo elements. It gives you much more control. Here's a demo with the basics of how to do it.
 
See the Pen rNpXXWq by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening.

Hi @glenhodges 
 
Welcome to the forum.
 
Yep - just like @Cassie mentioned, morphSVG would make this pretty easy. Here's a quick version to show you the basics.
 
See the Pen PoEGNjm by PointC (@PointC) on CodePen

 
MorphSVG is a Club GreenSock perk so you can check that out too. 
 
Happy tweening and welcome aboard.

 

You'll need to register the plugin.
gsap.registerPlugin(TextPlugin);
See the Pen 02869f0e1ee6cd13d869699556700b2c by PointC (@PointC) on CodePen
 
Happy tweening and welcome to the forum.