Looped "scrolling" sections with other elements around them

[rolandr]

Hello, I'm trying to use the examples from the website to achieve the same animation but with other elements (header, footer) around, and between them. I modified the CSS, so the panels are not fixed, and also changed the container. I'm sure the problem is that I don't understand how these animations work, and seems difficult for the first try. Can you guys give me some guidelines or an existing example what should I look for?  Thank you!

 

Structure what I would like to achieve:

<header>

<animation slide 1 | slide 2 | slide 3>
<content without animation>

<animation slide 4 | slide 5 | slide 6>

<footer>

See the Pen RwZwezb by rolandr (@rolandr) on CodePen

[akapowl]

 

Hello @rolandr welcome to the forum.

 

I suppose it is this example that you meant?

 

See the Pen rNOebyo?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

 

For that example to work within the structure you have in mind, keeping the same base of logic for the ScrollTriggers as in the example,  you would actually have to expand the logic by quite a bit. There's a lot of things you will have to consider, when doing scroll-based animations like these, so getting a basic understanding of how the code triggering those works, will be essential to tweak them to get the result you'd like/need - unfortunatelly, even though GSAP and ScrollTrigger make all the things way easier than they would be without them, there is no out-of-the box magic tricks when it comes to things like these.

 

Since I was intrigued myself, here is an example of how you could tackle things - but please note; these forums generally try to stay focussed on GSAP specific questions and are not intended to provide 'how-do-I-do-this-effect" ready-made code-solutions, as there will always be quite some thinking that has to go into effects like these.

 

See the Pen db10c0040ba6c29929dd848358634308 by akapowl (@akapowl) on CodePen

 

 

 

Some quick explanations:

• I changed the variable names in the JS from sections to panels because at some point when tinkering with this, I had to make a differentiation between scrollable sections and the .panel sections - I found that not to be neccessary in the end, but the name changes remain nonetheless.
   
• This whole concept relies on the animated .panel sections being wrapped in that .animation_container and the normal scrollable sections being wrapped in a .no_animation container
   
• All those are then again placed in a main container which serves as the trigger and thus the basis for the calculations of start and end of the ScrollTriggers
   
• Instead of setting the body's height beforehand accordingly with regard to the amount of panels as in the original example, I here rely on pinning for making the height adjust - I'm pinning a wrapper (.everything) around the whole thing here, for pinSpacing not to have a visible effect (so there will be no white-space added)
   
• The start & end of the ScrollTriggers now inlclude a getOffset() which basically loops over all the previous containers and adds up on value for those previous containers that don't have the animation/pinning going on (plus once the header's height).
   
• Additionaly in the setPanel-function I added a check for the first of each container's panels to only fade out when scrolling down and the last one of each container's panels to only fade out when scrolling up, so they remain visible when you scroll back to that container.
  
  and last but not least
   
• There might pretty certainly be an easier way of doing that - as in different scenarios usually different solutions make more sense, but I didn't want to stray away too far from the basic example's functionailty.

 

 

Hope this will come in handy.

Happy ScrollTriggering

 

[rolandr]

This is exactly what I tried to achieve.

 

Quote

there is no out-of-the box magic tricks when it comes to things like these

Thank you for your time, really appreciate it. I'll read the whole documentation again to know more about the library!