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. https://codepen.io/gjcod/pen/YzLWVWN Thank you for your time and effort in responding!

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: https://codepen.io/gjcod/pen/YzLWVWN Here is the example with the more complex layout, which isn't working for me now: https://codepen.io/gjcod/pen/qBYNmRZ 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!

Basically I want this PEN QWQrpGE 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!

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.