Novaliz

Thank you very much! I dedicated my holidays to learn more of gsap I have gotten now what I did wrong!

I would like to recreate this example written with scrollMagic and GSAP. https://codepen.io/PointC/pen/xopaBa However, in my example panel A does not stay fixed so that panel b can slide over it from right to left, but it scrolls with it. also the scrolling from panel c to the last content is faulty. how can i fix my error?

I would like the words in the heading "Tradition + Innovation" to appear one after the other from below. If I try it with a normal animation, I have to put each word in a div so that I can animate it. But then it is the case that before the animation the word is briefly missing and the whole headline then jumps from left to right when the animation has started. Do I need the scrampletextplugin to make such an animation?

Thank you for your help! I have solved my problem! ?

Thank you! I need it just the other way that the items start closed and expand when scrolling Maybe I can figure it out how to do it. Thanks for your time!

On this website are sections stacked of each other and they expand one by one when scrolling. Can you achieve that with GSAP and when how? a small hint would be awesome. Here the link to the website https://www.appart.agency/ and a screenshot of the section I meant:

I have a ScrollTrigger on a p element on which I want to use gsap.to and gsap.from. I wrote it this way: gsap.to(".p-blinker", { duration: 2, opacity: 1, scrollTrigger: { trigger: ".hero", start: "top 0", end: "bottom 80%", // markers: true, }, }); gsap.from(".p-blinker", { duration: 2, y: "150", scrollTrigger: { trigger: ".hero", start: "top 0", end: "bottom 80%", // markers: true, }, }); I wonder If there is a better solution for this? I needed to write it this way because otherwise the p element would stay 150px higher after the animation.

Ah, I found the problem. I have to write scrollTrigger with a small s. ?

I am using gsap with a vanilla Vite environment with Sass and npm install. The core plugin and the text plugin did work but not the ScrollTrigger plugin. What could be the problem? I am getting this error in the console: "gsap.js?v=3fc78497:84 Invalid property ScrollTrigger set to .star Missing plugin? gsap.registerPlugin()" I googled my problem but all the solutions I have found did not work for me. main.js file: import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); gsap.from(".star", { duration: 3, rotation: -360, ScrollTrigger: ".star", }); html file: <!-- Hero --> <section class="hero"></section> <!-- Section-1 --> <section class="section-1"></section> <!-- Section-2 --> <section class="section-2"> <img class="star" src="/assets/img/star.svg" alt="" /> </section> <!-- Section-3 --> <section class="section-3"></section> <!-- Javascripts --> <script type="module" src="/main.js"></script> </body> </html>