First ScrollTrigger animation at top of page affecting start and end position of lower element animation

[Tylor]

Hello all, I'm pretty fresh to GSAP but have seen it cropping up more and more on sites that I've been inspired by. It seems super robust and I'm keen to learn but have been running into a snag in my project. Currently I have two animations on the page but will likely be adding some more as I flesh it out.

 

The problem I'm running into is my first animation uses translateY and padding to visually keep the element at the same Y position / pinning it on the page until it reaches a padding of 0. I tried adding a marginBottom to this element as well to avoid the spacing problems caused below the element when the translateY is applied. It all works great except for the fact that now the start and end position of the second element (lower on the page) is starting at the wrong place. I am basically wanting to start horizontally scrolling the list of services once that element's bottom hits the bottom of the viewport.

 

It's possible I'm doing a lot of things wrong but maybe someone can point me in the right direction!

 

Cheers,

Tylor

See the Pen YzreVgr by tylorreimer (@tylorreimer) on CodePen

[OSUblake]

Welcome to the forums @Tylor

 

One issue is that you are nesting ScrollTriggers inside a timeline. Please check out this article on the most common ScrollTrigger mistakes.

 

Also, you can use y instead of translateY.

 

But after that, I'm a little confused about what you are trying to do. If you want the black box to pinned, why don't you just use pin: true? You shouldn't animate something that will affect the start and end of other ScrollTriggers, like padding, margin, height, etc. GSAP will not automatically recalculate those values unless ScrollTrigger refreshes.

 

 

[GreenSock]

I wonder if you meant to do something like this?: 

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

 

You don't need to do invalidateOnRefresh: true unless you've got dynamic tween values (function-based). And like Blake said, don't nest multiple ScrollTriggers inside tweens in a timeline because it's logically impossible for both the timeline and the scrollbar position to control the playhead simultaneously.

 

Does that help at all? 

[Tylor]

@GreenSock and @OSUblake thanks for the tips. I've been mostly piecing together the logic from other demos with similar functionality until I get a more full grasp of how GSAP works but it sounds like a timeline might not be helpful in this case.

 

I think there was one extra puzzle piece that I didn't include in my original pen but have updated now based on some of the feedback. I have a fixed header—on my full site it slides up after scrolling a bit so you can ignore the fact that it is over top of the content lower on the page—that is part of the reason I wanted to prevent the #site-video section from scrolling up and overlapping the header until it filled the full width of the page.

 

When I use the pin approach on #main it overwrites my padding that kept #main from overlapping with the .site-header initially. Perhaps there is a way to pin yet keep that space at the top and that solves all the issues?

 

[OSUblake]

Hi Tylor,

 

You can set where you want the pin to start with start, so maybe something like this?

 

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

 

And there is no need to do polling to check if something has resized. If you need to tap into when ScrollTrigger updates, like on resize, you can use refresh, or if you need some calculations before that, you can use refreshInit.

 

GreenSock | Docs | Plugins | ScrollTrigger | static.addEventListener()

 

 

 

[Tylor]

I think I managed to piece together a solution that's working nicely with @GreenSock and @OSUblake examples. Thanks for the help! I can see myself using GSAP on a lot of projects moving forward.

[Tylor]

So I'm continuing on with this project and wondering if there's any way to add some easing / scroll velocity into the animation mix.

 

https://xmas.mill3.studio/ - about 1/3 down the page is a ticker

I saw this example that was super interesting and it looks like it may be using locomotive and possibly a library called PixiJS but I'm sure you could do something similar with GSAP. I've built tickers in the past with CSS animations but not sure how use JS to power a ticker and tap into velocity to change the speed of the animation and have it ease down to the base speed.

 

Perhaps @GreenSock or @OSUblake either of you can point me in the right direction? Would I need to use a scroll jacking library like locomotive to accomplish this effect?

[GreenSock]

You shouldn't need a library like LocomotiveScroll, no. PixiJS is more for rendering. It has nothing to do with scroll-based effects. 

 

I'm struggling to understand what specific question you're asking here. Could you elaborate what you want exactly? You can animate the timeScale() of an animation with another animation. You can use InertiaPlugin to do things based on velocity. Lots of options. We don't really have the resources to offer free consulting services for general "how do I recreate this cool effect" kinda thing, but we're happy to answer any GSAP-specific questions. 

 

These threads may be useful: 

 

 

 

 

[Tylor]

@GreenSock I'm just looking into timeScale() and it looks promising. I wasn't necessarily looking to have someone write the code just point me in the right direction so thank you.

 

Basic functionality was just a ticker that gets a temporary speed boost when you scroll faster and then slows down. It looks like

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

might have most of the functionality I need. I saw that ScrollTrigger has a velocity property I'd just need to figure out how to tween that down to 1 after you stop scrolling.

[OSUblake]

Here's a velocity demo just to give an idea...

 

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

 

[Tylor]

@OSUblake and @GreenSock thanks for the direction so far. I've got a MVP working of a ticker that speeds up with scroll velocity and then slows back down to the base play speed with a tween. Probably not the most eloquent solution but it's getting closer in terms of functionality. If you spot anything you can suggest to make it more performant I'd love to learn! Much appreciated as always.

 

See the Pen jOaxbJw by tylorreimer (@tylorreimer) on CodePen

 

How do I accomplish looping when the timeScale() goes in reverse? It currently just stops when it gets back to the beginning. Feeling pretty good otherwise.

[GreenSock]

You can just move the repeat: -1 to your timeline and then use an onReverseComplete() to jump the playhead forward by several iterations like this: 

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

 

Is that what you're looking for? 

[Tylor]

Great, looks like that worked! Do you mind explaining what exactly bumping the playhead on onReverseComplete() accomplished just so I can understand it? I'm assuming it will still continue looping even after it's looped through the 10 iterations it was bumped correct?

[OSUblake]

Going in reverse isn't infinite. It will play back for as long as it's been playing forward. It's probably easier to understand with this pen. Notice that when you hit reverse and the time goes to 0, the animation stops. So bumping the playhead is adding extra time so it can continue playing in reverse.

 

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