Scrolltrigger SVG Animation mobile issue

[ffinger]

Hello GSAP people,

 

I'm working with gsap the first time and not having a lot of JS experience, so I hope I can find some help here.

Thanks for creating GSAP in the first place, really fun to experiment with it

 

I hooked a SVG animation to ScrollTrigger and it works as expected on desktop: https://wordpress.flosse.works/start/

But as soon as I switch to mobile it behaves very strange (IOS 16.5, Safari and chrome tested), see video attached.

I created a demo, but it's basically just the helper function provided in the docs (I used the json file from the original demo, because I can't upload one).

 

I work on wordpress page builder theme (LayTheme), which is loading the content dynamically via ajax. Any idea what could cause this?

Help would be appreciated

 

Cheers!

Felix

 

See the Pen LYXGEvN by ffinger (@ffinger) on CodePen

[Rodrigo]

Hi @ffinger and welcome to the GreenSock forums!

 

Thanks for the kind words!

 

Unfortunately your codepen example doesn't seem to replicate the issue you're seeing. Most likely this could be due to the fact that the HTML/CSS is not the same. If possible try to create something as simple as possible that is close to the real scenario.

 

The problem could be in this particular part of your HTML:

 

You have those two sections that in desktop are side by side but stacked on top of each other in smaller screens. It seems that you are pinning this particular element:

 

The issue could stem from the fact that you are pinning an element nested inside the "row one-col-row" element, which could be creating the problem. There are two alternatives:

1. Pin the outmost parent of the SVG you are animating, that is the parent element with this class "row one-col-row" using pinSpacing: false in your ScrollTrigger configuration.
2. Use GSAP MatchMedia in order to to create different animations and ScrollTrigger configurations depending on the screen size:
   https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

Hopefully this helps.
Happy Tweening!

[ffinger]

Hi @Rodrigo you're a life saver! It was not exactly what you mentioned, but you got me on the right track! The theme creates the DOM for desktop even when being on mobile and GSAP fired the scrolltrigger in the desktop container on mobile, which obviously caused a mess. Now I just applied the animation to a unique container on mobile and it works like a charm! 

Thanks a ton for the quick help and keep up the great work with GSAP 🤩