MarcOlmos

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.

I've found the solution, thank you!!! // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM loaded"); // wait until images, links, fonts, stylesheets, and js is loaded window.addEventListener("load", function(e) { // custom GSAP code goes here console.log("window loaded"); gsap.registerPlugin(ScrollTrigger); document.getElementById("button").addEventListener("click", function(){ const notifyTL = new TimelineLite({paused: true}) notifyTL.to(".notifyjs-corner", {y: +70}) var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; console.log(currentScrollPos); if (currentScrollPos > 218) { notifyTL.reverse(); } else { notifyTL.play(); } } }); }, false); });

Hi, I've been having problems with an element that appears when a button is clicked. When I scroll more than X px my navbar height changes, and I would like to do the same with the element to animate. But GSAP doesn't find the target. How can I make GSAP wait to search for the animation until I click the button of "Adding to the cart"?? Thats my code. Thanks!!!

Hi, I would like to create this cool navbar animation. The navbar desappear once you scroll down, but it appears again when you scroll up a little bit. https://caprocat.com/ Thanks for you help.

Thank you!! It was that!!

This is how I enqueued GSAP and ScrollTrigger, the problem could be there. I will be waiting for some help. Thank you!

Hi, I was trying to created some cool animations using ScrollTrigger, but it doesn't work. The animation plays once the page is loaded. This is my code: I would like to add that thanks to the activity of this forum I could integrate GSAP animations to a child theme on Wordpress.

Thanks Zach. I love you.

Is there any option in order to scroll to the left or to the right and make changes with ScrollTriggers? I have been trying to do it, but gsap only detects vertical scrolling, not horizontal scrolling. I'm trying to do something like that https://robin-noguier.com The effect that I want it is only seen in mobile responsive. Thanks.