Button to activate an animation + Scroll trigger with absolute layered divs

[scavaliere]

Hello everyone!
I have made a wrapper with some div in absolute positioning to make them overlaying. 
I need two kind of animations: 
1) ScrollTrigger driven, while I scroll the divs appear and disappear in fade 
2) On button click, a section fade out and the next fade in.

WHAT I GET: 

My problem is that if with scroll trigger it works correctly, when I click on a button the animation is correct but it seems unlinked to ScrollTrigger animation. In few words when I click on the button the animation runs correctly but, when I use scroll top or down, the just animated div keeps appearing and duplicated. It disappears only when I finish a full scroll. 
You can see it if you scroll on the second section (layered pinned divs) and click on "CHANGE" block read more. It runs the animation, in fact "CONNECT" div appears slowly, but after the animation if I scroll the div remain there. 

WHAT I NEED: 

I would need the animation to be "aware" of the div I am animating so: 

1) when I click on first read more, the animation should make the second div appear
2) the div shouldn't be duplicated when I start scrolling again. The scrolltrigger animation should be linked to the button animation. 

 

Hope it's clear. 

Thank you in advance for all your suggestions!

Have a nice day!
 

See the Pen NWdJZrV by scavaliere (@scavaliere) on CodePen

[Shaun Gorneau]

Hi @scavaliere,

 

A few changes would help you along here. The first thing is that within your function handling the click event, you're creating tweens that are disconnected from the timeline. So they have no affect on the scroll position which in turn ties into the scrollTrigger. Using the scrollTo plugin and tweeting the scroll position should accomplish what you're looking for.

 

As a note, I've added a label to your timeline in an effort to use scrollTo and grabbing a pixel value of the label position ... but I have not figured that out yet. In this instance, I simply put a pixel value of 250. It would be much better if this value was calculated as it would be more flexible. If/when I figure that out, I'll be sure to update you.

 

See the Pen abpxbbB?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Hope this helps.

 

Shaun

[scavaliere]

Hello @Shaun Gorneau!
Thank you for your effort in solving my issue!
I've seen the codepen, in fact is working but it gives different results on different  resolutions. 
When I decrease the resolution and the height of the window, the scroll is not correct. 
However it's a great starting point! I will work on it and I will also wait your possible updates!

Thank you again!