Circular transition to reveal next/previous section

[GJcode]

Hello,

 

I am trying to make a circular reveal transition in between sections.

On scroll down, the circle is getting bigger, showing inside it content from the next section.

On scroll up, the circle is getting smaller, showing inside it content from the previous section.

The animation starts when a certain section (the 2nd in my codepen) is into view. Scrolling down should reveal the content from the next section (3rd one) inside the blue circle. 

I tried with a custom SVG, from another example, but I don't know how to place it in the 3rd section, so the content will stay fixed inside the circle.

Any help? I appreciate your time.

See the Pen ZEoQyQJ by gjcod (@gjcod) on CodePen

[GJcode]

Basically I want this PEN 

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

 by akapowl (@akapowl) on CodePen - 

 

On the pinned sections, the transition between them to be a growing circle, instead of a simple fadeIn animation. 

As described in the 1st post - on scroll down the circle is getting bigger, revealing content, on scrollDown it does the exact opposite.

Thank you, again!

[mvaneijgen]

Hi @GJcode welcome to the forum!

 

I would place all the sections you want to appear from the same place on top of each other with CSS. Then animate a circle clip path from 0% to 100% (or more if needed). Here is a site you could easily create clip-paths in all sizes and shapes. 

 

I've added the animation to each section with in the #container, but you could easily target only one by giving it a class or animate 10 more by creating more sections.

 

See the Pen WNJrMRB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[GJcode]

Thank you, @mvaneijgen!

 

I've got it to work in a simple HTML layout, as I want it to be. However, when I try to apply it to a more complex website layout, with more div's and sections, the desired outcome is not there.

 

Here is the simple working example, like I want it to be:

See the Pen YzLWVWN by gjcod (@gjcod) on CodePen

 

Here is the example with the more complex layout, which isn't working for me now:

See the Pen qBYNmRZ by gjcod (@gjcod) on CodePen

 

I just copied the HTML part from the website. It is pretty basic - it has a section with the id "container", and inside it, 3 other sections. The section I want to animate has the class "fadein-circle".

 

I'm stuck at this moment, I think the layout is not working because of some faulty CSS, but I can't seem to find it. Any help is highly appreciated, as I am bugging at this for hours.

 

Thank you!

[mvaneijgen]

Hey, It definitely doesn't work to just drop your rendered HTML in codepen with some CSS and JS. GSAP and as I can see Elementor does a lot of stuff with with your HTML structure to render it all. 

 

I've made your demo with CSS Grid and it needs every element to be a direct child of the grid, if there is some other element in between these children will not be part of the grid any more. And that is what Elementor does, it adds a lot more DIVs to your setup, so you need to work around that and plan accordantly. 

 

// ✅ This does work 
<grid>
  <child/>
  <child/>
</grid>

// ❌ This doesn't work 
<grid>
  <someOtherElment>
    <child/>
    <child/>
  </someOtherElment>
</grid>

 

It is easier to remove ScrollTrigger and GSAP at first, focus on the layout first (eg everything should be stacked on top of each other, than focus on the animation (eg the animation should do what you want and look correct) and when that is all done add ScrollTrigger back in and test how it works on scroll.

 

Here is what I've got, with some HTML tags removed 

 

See the Pen qBYNmxq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[GJcode]

I got you! The extra div elements that Elementor adds is indeed my problem here. I will try to figure out how I can make the grid layout first, like you suggested and then try to focus on the animations itself.

 

I have one more question. If for eg I want to make the animation trigger on certain sections, not all of them, how would I modify this code to address just those sections based on their common classname?

 

This works for all the sections:

timeline.from("section", {
    clipPath: "circle(0% at 50% 50%)",
    stagger: 1
  });

Would this changed code work for sections containing the class ".circle" ? 

const circles = gsap.utils.toArray('section.circle');
circles.forEach(circle => {      
      timeline.from(circle, {
        clipPath: "circle(0% at 50% 50%)",
        stagger: 1,
      });
  })

I want to trigger the animation only on sections with certain class names, so not all the sections will have the circle animation.

I tried the above code, but the animation is triggering in the same "spot" for all the animated sections, and the order of the HTML content is lost.

 

See the Pen YzLWVWN by gjcod (@gjcod) on CodePen

 

Thank you for your time and effort in responding!