[gsap] 해당 영역에 왔을때 나타내기

HTML

<section id="skill" class="skill fade_action fade_top"></div>

JS

//fade animation
    function animateFrom(elem, direction) {
        direction = direction || 1;
        var x = 0, y = direction * 300;
        
        //클래스 별 나타나는 위치 주기
        if (elem.classList.contains("fade_left")) {
        x = -100;
        y = 0;
        } else if (elem.classList.contains("fade_right")) {
        x = 100;
        y = 0;
        } else if (elem.classList.contains("fade_top")) {
        x = 0;
        y = 100;
        }
        
        elem.style.transform = "translate(" + x + "px, " + y + "px)";
        elem.style.opacity = "0";
        gsap.fromTo(elem, {x: x, y: y, autoAlpha: 0}, {
        duration: 3,
        x: 0,
        y: 0,
        autoAlpha: 1,
        ease: "expo",
        overwrite: "auto"
        });
    }
    
    // 초기에 안보이게 셋팅
    function hide(elem) {
        gsap.set(elem, {autoAlpha: 0});
    }
    
    //해당 클래스를 가진 현재 elem에 Gsap 이벤트 주기
    gsap.utils.toArray(".fade_action").forEach(function (elem) {
        hide(elem); 
    
        ScrollTrigger.create({
                trigger: elem,
                //markers: true,
                onEnter: function () {
                animateFrom(elem)
                },
                onEnterBack: function () {
                animateFrom(elem, -1)
                },
                onLeave: function () {
                hide(elem)
                } 
            });
        });