Masha555

When there is not enough view height, the pinned child element goes beyond its parent, why does this happen and how to fix it? This is a small demonstration of my problem:

My project was created in angular. When I deploy to netlify, I get an error Error: Module not found: Error: Can't resolve 'gsap/SplitText' in '/opt/build/repo/src/app/modules/pages/main-page/components/main-page'. I do not know what this error may be related to... I installed gsap using npm from a special package for club members. In the root of the project, I created a .npmrc file with a token, as indicated in the instructions. But I still get the error. In my component I specify as follows: import { gsap } from 'gsap'; import { SplitText } from 'gsap/SplitText'; gsap.registerPlugin(SplitText); And everything works fine locally. Please tell me what this may be related to.

Thank you very much. Now I know how to use it!

Hello! I added a small demo component. Demo

Hello. Indeed I have in the course of experiments managed to solve the problem with scrolling. I forgot to warn you about it. Thank you very much for your help.

It really works! Thank you for helping me, it's very inspiring to learn more. Could you please tell me one more thing, if I have a child element in which I also want to use scroll button to a given element. I create a new ScrollSmoother in the class method, it does its function, but it scrolls down too fast and not smooth ... If you don't mind, you can see it in my demo project in the CONTACTS section. my Demo Project

Please look at my code again, maybe you will be able to understand what causes this behavior of the "Top" button.

Thanks, this helps, but when I want to add additional functionality in the form of a to top button, my button does not get the correct coordinates, demo of my project

Hello, please tell me what I need to fix in my code to make ScrollSmoother work in my Angular project. What am I doing wrong? I have created a small demonstration of my project. a demo of my project

Hello, please provide an example or a small explanation of how to use GSDevTools in an Angular component . I don't know how to add GSDevTools to a demo project, but I tried to create a minimal component to make it easier for you to help me advise you on how to properly use GSDevTools.create() in an Angular component.

Only when changing the width there are problems and the images are duplicated, and another problem is that the images go beyond the height of the container with the red border...

Thank you very much for your help to me. This is exactly what I wanted!

I tried to make a gallery following the following example: <section> <h1>THIS ISMY FIRST SLIDE ANIMATION</h1> </section> <section> <h1>GREAT THAT IT SWORKING</h1> </section> <section> <h1>SCROLL MORE TO SEE MORE</h1> </section> <section> <h1>LOVING THEIMAGES</h1> </section> <section> <h1>NICE, RIGHT?</h1> </section> import { Component, OnInit } from '@angular/core'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/all'; @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent implements OnInit { constructor() { } ngOnInit() { // Register the ScrollTrigger with gsap gsap.registerPlugin(ScrollTrigger); //Loop over all the sections and set animations gsap.utils.toArray("section").forEach((section: any, i) => { // Give the backgrounds some random images section.style.backgroundImage = `url(https://picsum.photos/${innerWidth}/${innerHeight}?random=${i})`; gsap.to(section, { scrollTrigger: { // Trigger the animation as soon as the section comes into view trigger: section, // Pin the section to give a feeling like slide for next section pin: true, // Remove the extra pin space added by default pinSpacing: false } }); }); } } No CSS needs to be added. But my code doesn't work :( Please help me find the error My code Working demo of the author of the lesson

I added a link to a minimal example

I am creating a gallery of images using css flex and ScrollTrigger technology; After changing the width of the screen, the new card does not immediately occupy a new place images gallery , only after scrolling it is visible after scrolling. Maybe there is a method to update the animation after changing the screen width? The gallery is unstable... I think we need to use the update() method somewhere. Please help me . I use a framework Angular. link to the minimal example