The case of the missing pinned Lottie animation...

[Mattrudd 52 Likes (Contributor)]

Hi folks, I'm edging nearer to finishing my site - one of the last pages I'm adding to production is a pinned left column holding an image, with a Lottie eventually pinning in the right column.

The way I've set this up is probably pretty clunky*...

Main issue - the Lottie animation pins and plays fine within its container in Chrome, and also in a Codepen in Safari... BUT - the live site viewed in Safari doesn't show the Lottie in its container, despite the container pinning... in fact it's greyed out in the Inspector. 

Weird? An issue with my Lottie setup? Bad CSS? yet another Safari bug?

My usual disclaimer, pleading forgiveness for what may be another face-palmingly obvious issue. I've come a heck of a long way with web dev over the last year or so, mainly down to the support I've received here... but most of my coding efforts happen in the stolen hours late at night... de rigeur!

*A side issue... I'm manually timing when the right and left columns unpin... I'm using vh on .left-side-column and a .spacer-div to very clunkily try and match when the right column (bmx image) unpins with when the Lottie anim on left itself completes and unpins... pretty sure I need to investigate an onComplete function here, as there's a bit of a lag/it isn't very practical across viewport sizes)

Thanks a bunch as ever ☺️

See the Pen vYVVXYR by matt-rudd (@matt-rudd) on CodePen

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

I can't test on Safari, but maybe the problem is here:

LottieScrollTrigger({
  target: "#map",
  path: "https://assets1.lottiefiles.com/packages/lf20_q7yxm6pp.json",
  speed: "medium",
  pin: ".left-side-column",
  pinnedContainer: ".left-side-column",
  start: "top 20%",
  end: "+=2000",
  scrub: 1,
  pinSpacing: true,
  markers: false
});

Why are you setting the pinned container to be the same element you are pinning in that particular ScrollTrigger instance? That makes no sense to me honestly. The other ScrollTrigger instance is not pinning that element, nor any other ScrollTrigger instance for that matter.

 

Finally if you want two different ScrollTrigger instances to end at the same time you can use the previous method in a function based value in the lottie ScrollTrigger instance:

LottieScrollTrigger({
  target: "#map",
  path: "https://assets1.lottiefiles.com/packages/lf20_q7yxm6pp.json",
  speed: "medium",
  pin: ".left-side-column",
  start: "top 20%",
  end: (self) => self.previous().end,
  scrub: 1,
  markers: {indent: 300},
  id: "lottie"
});

Here is a fork of your example with these changes in it:

See the Pen xxyyoeO by GreenSock (@GreenSock) on CodePen

 

Finally when you're pinning an element in a ScrollTrigger instance there is no need to add this:

pinSpacing: true,

Since that's the default.

 

Hopefully this helps.

Happy Tweening!

[Mattrudd 52 Likes (Contributor)]

On 5/18/2023 at 11:01 PM, Rodrigo said:

Why are you setting the pinned container to be the same element you are pinning in that particular ScrollTrigger instance? That makes no sense to me honestly. The other ScrollTrigger instance is not pinning that element, nor any other ScrollTrigger instance for that matter.

I made this a while ago - not sure what my logic was there at all in hindsight!

Just seen this response - thanks loads @Rodrigo 🙌