Gsap layout mess on mobile

[xavier Iñarra]

Hi , I´m almost new with Gsap but....

I´ve give it a try on a website i´m doing.

I´ve done some basic animation with text - background fade between section and some toggle class . Everything works fine on desktop but breaks my layout on mobile.

I´ve done a codepen that reproduce almost what i have on my website - except the background fade effect.

The JS code i´ve used on the codepen is almost the same that i have on my wordpress.

 You can see my web at http://gaia.e-soft.es/inicio-2 to see the final result - as i haven't been able to replicate exactly the same error on codepen-

As I mentioned the problem is with the mobile version-

 

I also have some -"gsap" is not defined - and -"ScrollTriger" is not defined- warnings on my wordpress that i don´t know how to handle

 

Also I've noticed that the desktop version breaks on safari

 

Any help or suggestion will be more than appreciated.

 

Thanks in advance

 

Xavier

 

See the Pen poQPRvw by xavier-ouidesign (@xavier-ouidesign) on CodePen

[mvaneijgen]

Hi @xavier Iñarra welcome to the forum! 

 

1 hour ago, xavier Iñarra said:

Also I've noticed that the desktop version breaks on safari

Works fine on Safari Version 16.5.1 (18615.2.9.11.7) 

 

1 hour ago, xavier Iñarra said:

I also have some -"gsap" is not defined - and -"ScrollTriger" is not defined- warnings on my wordpress that i don´t know how to handle

Are the warnings as follows "GSAP target .TitleS1a h1 not found. https://greensock.com" that means it can't find the element you are targeting, my advise would be wrap each piece of code that check if the element is on the page. My go do is the following line of code 

 

document.querySelectorAll(".ELEMENT").forEach(function (element) {
  
 ...GSAP code here for .ELEMENT
 
});

 

1 hour ago, xavier Iñarra said:

I´ve done some basic animation with text - background fade between section and some toggle class . Everything works fine on desktop but breaks my layout on mobile.

Well in CSS you have some media queries right? To optimize the styling for different size screens. GSAP also the same for Javascript code, check out gsap.matchMedia()  https://greensock.com/docs/v3/GSAP/gsap.matchMedia() 

 

Oh and a side note: GSAP has build in support for percentage based values for x and y with xPercent and yPercent, so   y: "-100%", becomes   yPercent: -100 
 

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

On top of @mvaneijgen's advice I suggest you to take a look at this article:

 

Be sure to queue your JS files correctly. Add GSAP and ScrollTrigger first and then queue your custom JS file making sure that both GSAP and ScrollTrigger are dependencies so every GSAP file you need is loaded and ready to use when your custom JS file executes.

 

Hopefully this helps.

Happy Tweening!

[xavier Iñarra]

thanks for your help

I was finally able to find where the problem was coming from... and it was not related to Gsap's custom code. I found out that it was a wordpress slider with custom css set to overflow -visible- that was causing the problem. I really appreciate your help a lot