Pinned section - scroll jump on start (safari iOS)

[Alex_Candela]

There is a little jump when you scroll into the pinned section (mobile viewport, safari, iOS). I have tried:

• adjunting start trigger
• adjusting end values
• adjusting scrub
• disable / enable pinSpacing
• adjunsting pinSpacing

See the Pen JjzObqW by Alex-Candela-Thunderfoot (@Alex-Candela-Thunderfoot) on CodePen

[mvaneijgen]

Hi @Alex_Candela welcome to the forum!

 

There are a few things you have to keep in mind when animating clip-path's every value should have to same suffix, eg when animating from 0 to 50% you have to make sure the 0 gets a suffix of the same symbol.

 

I've written a guide that goes more in depth, so check it out. Hope it helps and happy tweening! 

 

 

[Rodrigo]

Hi,

 

On top of Mitchel's great advice your trigger element is not found on the DOM:

ScrollTrigger.create({
  toggleActions: "restart none reverse none",
  pin: true,
  scrub: true,
  pinSpacing: true,
  trigger: ".b--layout-c",
  start: this.triggerStart(),
  end: 4500,
  onUpdate: (self) => {
    const progress = self.progress;
    const index = Math.floor(progress * 3);

    if (index !== this.loggedIndex) {
      this.showHideItems(index);
      this.loggedIndex = index;
    }
  }
});

Getting this warning on the console:

Element not found: .b--layout-c

So the ScrollTrigger instance is not working. Please tweak your demo so we can actually see the issue and include the debug link as well as the regular codepen link, so we can check that directly on our personal devices ad see if we ca spot any problems.

 

Happy Tweening!

[Alex_Candela]

Thanks @Rodrigo, I have solved the problem. Now it works but the jump in iOS is still happening.

Thanks @mvaneijgen, but the problem is not about the clip-path animation. Thanks btw

[Rodrigo]

Hi,

 

I'm not seeing any jump on an iPad running iOS 17.2 (chrome and safari) using this url (debug URL no frames):

https://cdpn.io/pen/debug/JjzObqW

 

Maybe I'm missing something here.

 

One thing you could try is use normalizeScroll in your global ScrollTrigger configuration:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Hopefully this helps.

Happy Tweening!