Scrolltrigger sequence pin next section to

[adamo]

Hi. I'm struggling to wrap my head around reversing the animation on leaving the sequence.

The idea is to leave the trash bag on finishing the sequenced animation. I was trying to add another canvas section but the complexity grew and I do more errors which broke the first sequence. 

 

So my question is more on the approach suggestions then a coded result. 

 

I've worked with this for a while and right now the only problem I have is to pin (start) the next section <div class="bag-reverse"><canvas id='bag-canvas-reverse' class='full-page'></canvas></div> from the top so both in and out animations would be almost seamless.

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

[SteveS]

I'm not sure I understand your question or the issue it is rooted in. Could you elaborate?

[adamo]

Yes. After the last slide with numbers I want the next section <div class="bag-reverse"><canvas id='bag-canvas-reverse' class='full-page'></canvas></div> to start at the top of the window - initially covering the previous section so the next transition seems like you're getting out ot the bag. Right now the bag-reverse section scrolls to top of the window to start the animation. 

[Rodrigo]

Hi,

 

This is mostly about your HTML/CSS setup. I've been playing with a similar simpler setup in order to try to get a section after the one, in order to pin it over the previous section without any luck. Maybe there is a simple way but is eluding me right now.

 

I think the simpler way is to add an element on top of the one with the horizontal section with opacity zero and visibility hidden, then show it and animate it as part of a common timeline, like this simple example:

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

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Hi,

 

Here is another option:

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

 

Hopefully this helps.

Happy Tweening!

[adamo]

Thank you @Rodrigothis got me on the right track, the're still some details, but I could show some version to the client at the deadline.