Scrolltrigger fade

[adamo]

Hi. I'm currently developing an animation that uses two section pinned in the same place. The idea is that after the user scrolls and "enters" the trash bag. the last frame should change the opacity and let the horizontal scroll take over (which works almost great).

 

The problem is with the reverse animation as the horizontal scroll  hits the first slide. The last frame of the trash bag appears. This project id done on a tight deadline and I'm hoping there's a simple solution for this. A delay maybe? Some spacing between te start of the counter and horizontal scroll?

See the Pen yLGOyar by depcore (@depcore) on CodePen

[Cassie]

Heya, happy to help here but struggling to follow a little.

Could you maybe point to the bit of the code and include some screenshots or a screen recording of the issue?

I'm not entirely sure what the reverse animation is or when the last frame shows up?

 

Thanks so much!

[adamo]

Sure. 

Here's the video.  

 In the 4th second the "55 years..." should be counting as the rest of the numbers in other slides (we get the finished counter when we enter the slide). And when the users scrolls back to "55 yeasrs..."  it should not be covered right away by the last frame of the bag, only when the user scrolls further up.

 

[Cassie]

If I'm understanding - you can change your snapping points a little.

 

//this...
snap: 1 / (sections.length - 1),
// could be written like this too
snap: [0, 0.33, 0.66, 1]

// 0 is the beginning and 1 is the end, and the decimals in between are the snapping points in the middle
// so if you don't want to snap right at the beginnning (0) - you can do this
snap: [0.1, 0.33, 0.66, 1]

Also you'll need a vertical trigger for the first counter because it's already 'in view' horizontally from page load.

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

Hope this helps!

[adamo]

Thanks for your help. Its a nudge in the right direction, the problem is the content is't centered in the first slide. But it got me thinking what if the first slide was one third the width of the rest (or some amount). So when the user scrolls he wont notice it. 

[Cassie]

Or just change the first value to 0.001? You can snap wherever you want!

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

 

[adamo]

Than you for your help. I'll play around with it.