I am using Scroll magic and TimelineMax and it is behaving Wierd

I am trying to hide one element once it gets into the view bt the timeline max is behaving weird and the element is jumping

I just started to use GSAP and Timeline max it will be really nice if anyone can help me with this

here is the link for the codepen: https://codepen.io/twinklek55/pen/MMvroB

var portfolioAnimation = new TimelineMax()
    .to('#portfolioText', 5, {
        x: -50,
        opacity: 1,
    }, "10")

const scene2 = new ScrollMagic.Scene({
    triggerElement: '#portfolioText',
    triggerHook: 'onEnter',
})
.setPin('.portfolio_contents')
.setTween(portfolioAnimation)
.addIndicators()
.addTo(controller)