Complicated animation

[shikari]

Hey!

 

I've got a tough animation task and have no idea even how to start approaching to the implementation.

 

Here's a website-reference: reference example. The part I'm interested in has "Trading with fey" title.

 

My task is similar in a sense.

 

Let me try to explain what I need:
I have a long section with a title and some description at the top. These two do not participate in animation.
Then I have subsections which have subtitle, sub-description and most of them have a list. The subsection takes around 50% width. The behavior I expect here is when I reach a subsection, subtitle and sub-description becomes sort of sticky and when I scroll, only list items appearing and disappearing one by one. When I reach the last list item I move to the next subsection and there I expect the same behavior.
Also I have an svg image on the right, it goes all the way along these subsections. It behaves as a sticky element and every time I go to the next subsection some elements inside this image should change their position(that's why I inserted it as an svg).

 

Hopefully I explained everything clear and I would be very thankful if you show me at least a direction where to move to start or send some similar ready implementations.

 

Thanks in advance!

 

See the Pen WNoxjKY?editors=1100 by lElfenLiedl (@lElfenLiedl) on CodePen

[ZachSaucier]

Hey shikari. One of the many demos in the ScrollTrigger demos section is this one that's similar to the effect that you're wanting:

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

[shikari]

Wow, @ZachSaucier, I looked at demos but missed this example. Thanks a lot. Will use it as a cheat sheet:)

[shikari]

@ZachSaucier Could you take a look, what am I doing wrong?

See the Pen WNoxjKY by lElfenLiedl (@lElfenLiedl) on CodePen

[shikari]

@ZachSaucier, seems I reached the desired behavior with text on the left side but I'm not quite sure how to bind the right side image to pin it all the way down along the left side.
Could you give me a tip?

See the Pen WNoxjKY by lElfenLiedl (@lElfenLiedl) on CodePen

[ZachSaucier]

I would pin the container and use a timeline attached to a scrubbed ScrollTrigger to do any hiding, revealing, and translating that you need to do.