Maelle

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

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