MarcOlmos

I have cloned the example: https://stackblitz.com/edit/stackblitz-starters-vg5rkj?file=src%2Fglobal_styles.css,src%2Fmain.ts,src%2Findex.html

Firstly, thank you for answering me. I am using force3D: true on gsap.config() for Angular. I am also applying "rotationY" property to try to force GPU rendering. import { Component, OnInit } from '@angular/core'; import { gsap } from 'gsap'; gsap.config({ force3D: true }) @Component({ selector: 'app-tabs', templateUrl: './tabs.component.html', styleUrls: ['./tabs.component.scss'] }) export class TabsComponent implements OnInit { ngOnInit(): void { } activateSwitchOnClick( partSelected: string, otherPart: string ) { const tl6 = gsap.timeline(); tl6.to(`.${partSelected}`, { duration: 0.5, width: 'calc(80% - 10px)', backgroundColor: '#FFFFFF', pointerEvents: 'none', rotationY: 500 }).to(`.${otherPart}`, { duration: 0.5, width: 'calc(20% - 10px)', backgroundColor: '#0C71C3' }, '-=0.5') .to(`.${partSelected} .extra-info`, { duration: 0.5, width: '40%' }, '-=0.5') .to(`.${otherPart} .extra-info`, { duration: 0.5, width: '0px' }, '-=1') .to(`.${otherPart} .extra-info .info-text`, { duration: 0.5, opacity: 0 }, '-=1.5') .fromTo(`.${partSelected} .extra-info .i1`, {opacity: 0, y: 10}, {opacity: 1, y: 0, duration: 0.3}, '-=0') .fromTo(`.${partSelected} .extra-info .i2`, {opacity: 0, y: 10}, {opacity: 1, y: 0, duration: 0.3}, '-=0') .fromTo(`.${partSelected} .extra-info .i3`, {opacity: 0, y: 10}, {opacity: 1, y: 0, duration: 0.3}, '-=0') .to(`.${otherPart}`, { duration: '-=2', pointerEvents: 'all' }) } } But I can´t see any change on the GPU. Thanks.

Hi, I would like to know if it is possible to force all GSAP animations to run with GPU, even if the animations aren't 3D. Thanks.

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.