[Forcing GSAP to run with GPU not with CPU]

I have cloned the example:

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

[Forcing GSAP to run with GPU not with CPU]

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.

[Forcing GSAP to run with GPU not with CPU]

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.

 

[A tag click problems when implementing pinned scrolltrigger]

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

[GSAP target not found of an element that doesn't appear when the page is loaded]

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);
  
});

[GSAP target not found of an element that doesn't appear when the page is loaded]

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

 

 

 

 

[I would like to do that navbar animations with ScrollTrigger]

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.

 

[ScrollTrigger problems in Wordpress]

 

12 hours ago, GreenSock said:

It looks to me like the problem is that you're using a very outdated version of GSAP that doesn't work with ScrollTrigger

 

Try updating to 3.7.0 for both. 

 

Thank you!! It was that!!

[ScrollTrigger problems in Wordpress]

 

 

[ScrollTrigger problems in Wordpress]

This is how I enqueued GSAP and ScrollTrigger, the problem could be there.

 

 

I will be waiting for some help.

 

Thank you!

[ScrollTrigger problems in Wordpress]

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.

[ScrollTrigger - Horizontal Scrolling]

Thanks Zach. I love you.

[ScrollTrigger - Horizontal Scrolling]

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.