Jump to content
Search Community

A tag click problems when implementing pinned scrolltrigger

MarcOlmos test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...