theme development - Smooth Scrolling Animation of Image Between Two Containers (Elementor) Using JavaScript and GSAP

admin管理员组

文章数量:1122832

I am trying to achieve a smooth scrolling animation in Elementor where a Cola can image moves from one container to another container as the user scrolls down or up the page. please see attached.

I am able to get the image from one container into the other and vice-versa, but not with the effect I am looking for, it is currently jumping from one container into the other container.

I want to sync the containers so when you scroll down or up, the image needs to disappear on scroll from the bottom and the removed parts need to show up synced in the second container.

So when you are scrolling and are at the half of the can, you see the top in the top container and the bottom half in the second container.

I'm using JavaScript and GSAP for animations.

How can I achieve this? Please point me in the right direction. This is what I have currently as code.

This is my HTML

<div class="elementor-element elementor-element-a9f48fb e-con-full hero-image-container e-flex e-con e-child" id="hero-image-container">
    <div class="elementor-element elementor-element-5790397 hero-can-container elementor-widget elementor-widget-image" id="hero-can-container">
        <div class="elementor-widget-container">
            <img src=".webp" class="attachment-large size-large wp-image-283" alt="La-Lime">
        </div>
    </div>
</div>

<div class="elementor-element elementor-element-123456 e-con-full target-column e-flex e-con e-child" id="target-column"></div>

This is my js.

document.addEventListener('DOMContentLoaded', function() {
    const heroCanContainer = document.getElementById('hero-can-container');
    const targetColumn = document.getElementById('target-column');
    const originalParent = heroCanContainer.parentElement;
    const triggerPosition = 300;  // Adjust this value as needed

    function moveToTarget() {
        if (!targetColumn.contains(heroCanContainer)) {
            gsap.to(heroCanContainer, {
                duration: 0.5,
                y: 0,
                opacity: 1,
                ease: "power2.inOut",
                onComplete: function() {
                    targetColumn.appendChild(heroCanContainer);
                }
            });
        }
    }

    function moveToOriginal() {
        if (!originalParent.contains(heroCanContainer)) {
            gsap.to(heroCanContainer, {
                duration: 0.5,
                y: 0,
                opacity: 1,
                ease: "power2.inOut",
                onComplete: function() {
                    originalParent.appendChild(heroCanContainer);
                }
            });
        }
    }

    function handleScroll() {
        const scrollPosition = window.scrollY;
        if (scrollPosition > triggerPosition) {
            moveToTarget();
        } else {
            moveToOriginal();
        }
    }

    handleScroll();
    window.addEventListener('scroll', handleScroll);
});

本文标签：