My slide gallery is not working

[Masha555]

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

 

[GreenSock]

Your sections had no height whatsoever and you set your trigger for each section to be ".fade-item" (which would default to the first one) instead of each individual section element. Is this more like what you wanted?: 

https://stackblitz.com/edit/angular-jxhmln?file=src%2Fmain.ts

[Masha555]

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

[Masha555]

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

[Cassie]

Hi there - Do you have a link to the actual code from the lesson? If so it'll be a case of 'spot the difference'

What is different in your demo compared to the working one?

 

 

[Rodrigo]

Hi,

 

I think the issue could be more related to actual CSS than anything else. Take a look at these links:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

 

Hopefully this helps.

Happy Tweening!