[ScrollTrigger - The pinned child element goes beyond its parent]

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:

 

See the Pen PoVbOVj by flowerrose (@flowerrose) on CodePen

[Build failure on netlify.com]

 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.

 

[How to use GSDevTools in an Angular component]

14 hours ago, Rodrigo said:

Hi,

 

You're not importing the GSAP DevTools constructor, you're not registering it and is better to instantiate it after creating your animations:

import gsap from 'gsap-trial';
import GSDevTools from 'gsap-trial/GSDevTools';

gsap.registerPlugin(GSDevTools);

export class App implements AfterViewInit {
  @ViewChild('link', { static: true }) linkEl:
    | ElementRef<HTMLElement>
    | undefined;

  constructor() {}
  ngAfterViewInit(): void {
    this.animation();
    // Instantiate GSAP DevTools
    GSDevTools.create();
  }

  name = 'Angular';

  public animation() {
    const tl = gsap.timeline();

    if (this.linkEl) {
      gsap.set(this.linkEl.nativeElement, { textDecoration: 'none' });
      tl.to(this.linkEl.nativeElement, {
        transformOrigin: '50% 50%',
        background: 'crimson',
        duration: 3,
        color: 'white',
        padding: '10px',
        ease: 'expo.out',
        borderRadius: 20,
      });
    }
  }
}

Hopefully this helps.

Happy Tweening!

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

[How to use GSDevTools in an Angular component]

On 8/5/2023 at 12:56 AM, GreenSock said:

Hi @Masha555. Thanks for being a Club GreenSock member! 💚

 

GSAP is completely framework-agnostic. It doesn't care if you're using React, Angular, Vue, vanilla JS or whatever. It's pure JavaScript. It really shouldn't matter much which framework you're using. 

 

I'm completely unfamiliar with Angular, but I know plenty of people use it with GSAP. If you're stuck, please just post a minimal demo (like a stackblitz or CodeSandbox) that illustrates the problem and we'd be happy to take a peek. And obviously if anyone else here in these forums is willing to post a demo showing GSDevTools in Angular, that'd be great. 

   Hello! I added a small demo component.   Demo

[ScrollSmoother and Angular]

8 hours ago, GreenSock said:

Sorry, I don't see the problem. If you need help, please be VERY specific about exactly how to reproduce the problem and make sure the demo is as isolated as possible.

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.

[ScrollSmoother and Angular]

3 hours ago, GreenSock said:

Yes, that's because you're trying to use a native scrollIntoView() method that isn't SmoothScroller-aware.

 

Just use the appropriate ScrollSmoother method:

// OLD
this.wrapperEl.nativeElement.scrollIntoView({
 behavior: 'smooth',
 block: 'start',
});

// NEW
this.smoother .scrollTo(this.wrapperEl.nativeElement,true);

https://stackblitz.com/edit/stackblitz-starters-unyihj?file=src%2Fapp%2Fapp.component.ts

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

[ScrollSmoother and Angular]

On 8/13/2023 at 12:04 AM, GreenSock said:

I'm not at all familiar with Angular, but it looks to me like a CSS issue on your end where you set the height of the content to be 100%, thus there's no scrolling possible: 

https://stackblitz.com/edit/stackblitz-starters-ck4w7t?file=src%2Fapp%2Fapp.component.ts,src%2Fglobal_styles.css

 

Does that help?

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

[ScrollSmoother and Angular]

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

[ScrollSmoother and Angular]

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

[How to use GSDevTools in an Angular component]

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.

[My slide gallery is not working]

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...

[My slide gallery is not working]

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

[My slide gallery is not working]

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

 

[Update the animation after the change DOM]

I added a link to a minimal example

[Update the animation after the change DOM]

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