[Horizontal parallax triggered by scroll]

Hello ! I am new to gsap and animation. 

 

I know there are a lot of forums about this topic but none of them have successfully helped me.  I have never done parallax before.

 

So I have a div with various elements on top of each other. By scrolling I want to have a little bit of parallax with a max point

I am using gsap into vue.js and I don't know how to initialize all of this. I've tried some stuff but nothing is working like i want.

 

I have attached a picture of the scene. The bird is supposed to go left, the fish right and the water has to move to the left. 

 

if you could give me a demo in a codepen I would really appreciate it 

Thank you for you help 

[Using Splittext with vue.js]

Hello everyone ! 

 

I am very new to GSAP and Vue.js and I am having some trouble with an animation. 

 

This is what I did. 

<template>
    <div class="help-page">
        <img class="close" src="@/assets/icons/close.svg" alt="">
        <div class="text-container">
            <h1>What to see</h1>
            <p class="splittext">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum, quos, magnam omnis perferendis laboriosam voluptatibus aperiam eligendi rerum fugit esse, ipsum vero quis reiciendis accusantium totam soluta ad.</p>
            
        </div>
    </div>
</template>
<script>
import gsap from 'gsap'
import {TimelineLite, SplitText} from 'gsap';


export default {

    mounted(){
        this.textReveal()
    },

    methods : {
        textReveal(){
            var $text = document.querySelector(".splittext"),
            mySplitText = new SplitText($text, {type:"words"}),
            splitTextTimeline = gsap.timeline();
            gsap.set($text, {perspective:400});
            mySplitText.split({type:"chars, words"});
            splitTextTimeline.from(mySplitText.chars, {duration: 0.5, scale:2, autoAlpha:0,  transformOrigin:"100% 50%", ease: "back.out", stagger: 0.02});
            splitTextTimeline.play();
            
        }
    }
}
</script>

but I am getting this error : TypeError: gsap__WEBPACK_IMPORTED_MODULE_2__.SplitText is not a constructor

 

I know I am missing something here but I don't know what it is .... 

 

Thank you so much in advance for your help