A tag click problems when implementing pinned scrolltrigger

[MarcOlmos 1 Likes (Newbie)]

There is a carrousel which scrolls horizontally while scrolling down, but inside it there are some <a> tags that doesn't work. It's like the whole component is set as pointer-events: none, but it's not.

 

https://dev-airnest.web.app/

 

Here I show my .ts code:

 

import { Component, OnInit } from '@angular/core';

import { gsap } from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';

 

gsap.registerPlugin(ScrollTrigger);

 

@Component({

selector: 'app-home',

templateUrl: './home.component.html',

styleUrls: ['./home.component.css'],

})

export class HomeComponent implements OnInit {

constructor() {}

 

ngOnInit(): void {

gsap.registerPlugin(ScrollTrigger);

 

if (window.matchMedia('(min-width: 400px)').matches) {

const home1 = gsap.timeline({

scrollTrigger: {

trigger: '.hm1',

start: 'top 0%',

end: '+=1300',

pin: true,

scrub: 1,

markers: false,

},

});

 

home1.fromTo('.hc1', { x: '100vw', pointerEvents: 'auto' }, { x: '-100vw', pointerEvents: 'auto' });

}

}

}

 

This is my .html code:

 

<div class="hc1 carrousel">

<a href="https://dev.airnest.es/grancanaria" class="place">

<div class="place-photo place-photo-1"></div>

<div class="place-title" id="test">Gran Canaria</div>

</a>

<a href="https://dev.airnest.es/tenerife" class="place">

<div class="place-photo place-photo-2"></div>

<div class="place-title">Tenerife</div>

</a>

<a href="https://dev.airnest.es/fuerteventura" class="place">

<div class="place-photo place-photo-3"></div>

<div class="place-title">Fuerteventura</div>

</a>

<a href="https://dev.airnest.es/lanzarote" class="place">

<div class="place-photo place-photo-4"></div>

<div class="place-title">Lanzarote</div>

</a>

<a href="https://dev.airnest.es/lapalma" class="place">

<div class="place-photo place-photo-5"></div>

<div class="place-title">La Palma</div>

</a>

<a href="https://dev.airnest.es/lagomera" class="place">

<div class="place-photo place-photo-6"></div>

<div class="place-title">La Gomera</div>

</a>

<a href="https://dev.airnest.es/elhierro" class="place">

<div class="place-photo place-photo-7"></div>

<div class="place-title">El Hierro</div>

</a>

<a href="https://dev.airnest.es/lagraciosa" class="place">

<div class="place-photo place-photo-8"></div>

<div class="place-title">La Graciosa</div>

</a>

</div>

Thanks for the help.

See the Pen by (@) on CodePen

[Cassie 5,137 Likes (Superhero)]

Hey there!

I can't see the link you provided - but the reason for this is usually that the clickable element is covered by another transparent element.

Try changing the z-index and looking around in dev tools to see if there's another element blocking the link.