scrolltrigger mask svg not working in safari

[zozo]

Hi there, 

 

I have an issue with this. 

It's working fine in Chrome, FF, but not in safari. 

It should scale the svg part on scroll, but in safari it's .. weird. It's very very slow, and not really reacting to scrolltrigger.

 

Can any one help ? 

Thanks, 

Best regards, 

Romain

See the Pen MWmRMLM by romainmalauzat (@romainmalauzat) on CodePen

[nico fonseca]

Hey @zozo ! Here is the thread with the same problem: 

See the Pen 1fb50e40f6c086568e3d2585799175e6 by nicofonseca (@nicofonseca) on CodePen

.  🤘

[zozo]

Hi nicofonseca, Thanks ! that was quick ! Should I use a time line controlled by a scroll trigger instead to improve performance like here ? 

 

[OSUblake]

You don't need to use a timeline if you're only controlling 1 animation with the scroll trigger.

 

[zozo]

That make sens. thanks ! 

[zozo]

Hi Again, 

I have kind of the same problem with a Timeline that start on scrolltrigger. Could you give an exemple of the same idea with a timeline please ? 

Best regards

 

[OSUblake]

It would be the same, just use the timeline's onUpdate.

gsap.timeline({
  onUpdate() {
    ...
  },
  scrollTrigger: {
    ...
  }
});

 

[zozo]

thanks !