Stuck on a Scrolltrigger/Lottie pinning issue

[Mattrudd]

Hi there.

 

Wonder if any kind soul can help. I'm in the process of getting to grips with Javascript and GSAP - so apologies in advance if my terminology and attempts at coding below are annoyingly bad! Thanks in advance for your patience.

 

What I'm trying to achieve is:

• Pin a block on scroll (pinned to centre of screen)
• Scrub through the lottie animation (JSON file) inside this pinned block with scroll
• Unpin the container block once the animation has finished

 

I then want to repeat this process for the next container block, but with a different animation.

 

The closest working example to this I've found is at the bottom of this post (I want a version without the pink gaps between pinned blocks!)

 

Here's my attempt at applying this code to my page (a complicating factor is I've using the Divi them builder in Wordpress!)

<removed>

 

What I'd like to do is remove the white and dark grey space above and below the pinned container (the yellow lines indicate where the unwanted gap is!) then reset the scrolltrigger so that the next block behaves in the same way... block 1 pins > animation 1 scroll-scrubs > block 1 unpins and scrolls up > block 2 scrolls up and pins > animation 2 scroll-scrubs > block 2 unpins and scrolls up etc. etc.

 

I know I need to change the pin, start and end values in the JS, as well as resetting the Scrolltrigger for each animation,  but I'm not sure how to go about this in relation to my Divi classes and IDs, and the vh values set for each block. 

 

Hope that all makes sense... I'll continue to read the Docs here and learn, but in the meantime any help/nudges in the right direction would be amazing!

 

 

 

See the Pen 96ec6e6dadf7b73d11e38cda125d8920 by akapowl (@akapowl) on CodePen

[GreenSock]

Unfortunately we don't have the resources to troubleshoot live sites for free, but here's a fork of @akapowl's demo you referenced without any space between the lottie animations: 

See the Pen 2d96cbe9403271abc3903dfd88d5d417?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's probably best to just put them all into one container and pin that container instead of trying to pin a bunch of different ones. I'm not familiar with Divi at all, sorry. 

 

If you still need some help, please just whip together a minimal demo and we'd be happy to answer any GSAP-specific questions. 👍

[Mattrudd]

Hey Jack, thanks loads for your response!

 

Fully understand the bulk of this is an off-topic Wordpress/Divi issue - so I'll seek out help there.

 

The reason I need to use more than one container is that I need to show different images and text alongside each animation in turn - static in the container, fixed so that they scroll up with the container once it's unpinned (after completion of animation)

 

So in my example below, there'd be different text/images in the black container next to the animated text (title 1) then same for orange container, and for green.

 

I noticed the final green box (#title3) doesn't pin, and animates with the box above - is there a fix for this? 

 

Thanks!

 

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

[GreenSock]

5 hours ago, Mattrudd said:

I noticed the final green box (#title3) doesn't pin, and animates with the box above - is there a fix for this? 

 

It looks like you weren't using the correct helper function from the docs - yours was missing the ScrollTrigger.refresh() and sort() calls. Here's a fork: 

See the Pen JjNgMjP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The problem is that you're loading various external assets that then mess with the layout, so you need to call ScrollTrigger.refresh() to force it to figure out all the start/end values accordingly. The correct helper function includes that. 

[Mattrudd]

Ah bless you dude! Managed to get it working really well with that missing function.

 

The only remaining issue was some white space created by the header above the first block - sure this is room the pinned scroll requires, so I simply added a negative margin to the header to fix.

 

Really grateful to you!

[Mattrudd]

Hi again @GreenSock , a further follow-on question if you'd be so kind again!

 

I thought I was good to go - after much head scratching worked how to reverse-engineer all the code using DIVI (which conveniently allows for CSS and JS to connect with the visual 'div' builder).

 

What I'm struggling with this time is I need to have different instances of ScrollTrigger for desktop and mobile. I need a responsive page, but as I'm using columns, the flex for mobile throws out the container heights, which of course messes up my pin/trigger locations.

 

I've gone through the ScrollTrigger.matchMedia() docs, and applied the example code as best as I could at this relatively early stage in my coding career!

 

I'm stuck with how to fix the Syntax error - but also:

 

• Is it possible to reapply the offsetHeight function as part of the matchMedia method? 
• Could you take a quick look at my code efforts below and tell me where I've gone wrong, syntax error and beyond?
• Tried to use some intuition about where the LottieScroller function at the end of the original Codepen (above) should sit, and figured this was an "all" function.
• Left the refresh at the end as I'll likely have other ScrollTriggers on the page. 

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

 

A valiant more than laughable effort hopefully - really enjoying this crash course!

 

Many thanks again!

[GreenSock]

Here are the issues I saw:

1. You had the "start" and "end" values on your ScrollTriggers set to the same values, so they take up no space at all. 
2. You created a bunch of redundant declarations for your two media queries. Just create one for each breakpoint and put all your stuff in there. 
3. You obviously had some syntax errors and you placed the LottieScrollTrigger function inside a nested function so it wasn't even available to the rest - just put that in the main scope (not tucked in anywhere)
4. The background color was white, so it was impossible to see your animations (which are also white)
5. You're pinning the same element multiple times, but I don't understand how you want things to flow. One animation plays and then...what, does everything unpin and scroll up until that next element is in view and then it pins again and plays? Sorry, I don't understand so I can't give you advice. I thought maybe you wanted to have one go through, finish, then everything scrolls up the height of that element and then another goes, etc. Here's my attempt: 

See the Pen vYZYpby?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[Mattrudd]

Hey thanks again - hmm your pen doesn't quite seem to be working for me...

 

Initially got an 'Uncaught TypeError: Cannot read property 'end' of undefined' line 43... on refresh that went but pin spacing etc is all off now, must be my browser?

 

4 hours ago, GreenSock said:

does everything unpin and scroll up until that next element is in view and then it pins again and plays?

Exactly this - as seen here, expanding on your help/pen from Friday: https://matt-rudd.com/240418-2/ This is essentially a business landing page with portfolio-style sections, so each of the Lottie elements will serve as a different section title in the end using the same custom-animated typeface seen above.

 

Apologies for the confusion there! Hope that's clearer. It's working well on desktop, just need to reposition and scale down the titles and crucially get the ScrollTrigger bits working responsively.

 

Noticed you've stripped out the getElementById parameters from the top, and replaced with a 'self' function - that looks neat! Hoping that works with my theme builder but may well end up replacing the start and end functions with keywords or percentages. Will get learning about that function and the getbyId etc.

 

 

[Cassie]

*just a note that sometimes demos don't work well in iframes and need to be opened up in a new tab

[Mattrudd]

Hey @Cassie - thanks yes - figured that, issue is definitely my end/explanations!

[Mattrudd]

Hi again - I've got my Lottie animation to work really well - thanks again for the help.

 

I'm now wanting the common fade in/move up effect for text and images once they enter the viewport - rather than using CSS animations etc it would be better doing with Scrolltrigger too. Just like in this example:

Thing is, I've read through the docs, the common mistakes and studied other examples, but I'm stuck as to how to get the fade-in to work alongside the existing Lottie animation.

 

Thinking it's a case of missing a function somewhere.

 

I don't need the yellow section to stick - just for the image and text to fade in/move up on entering the viewport.

(Kept the id of the elements to 'box', same as example above, for ease)

 

I know I'm trying to run before I can walk here, but got a very specific spec for this design 🙃

 

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

 

Thanks in advance, as ever!

 

 

[Mattrudd]

OK so I've answered my own question (html errors!) but it seems that the first 1st fade in the yellow section works fine (1 second delay, ease) but the 2nd and 3rd fades don't consistently show in the same way as the 1st fade (1 sec delay, ease)

 

@GreenSock Any ideas why? Am I missing something from the 

I could simplify the fade code but I'm keen on having the onEnter callback function present to negate any viewport issues as solved in the 'Scrolltrigger fade-in elements' thread posted above by @ZachSaucier

 

Perhaps I'm missing something from the onEnter bit?

 

Thanks. Got the GSAP bug I think!

 

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

[GreenSock]

You forgot to put pinnedContainer: '.Section' in your ScrollTriggers for the boxes. 

[Mattrudd]

Thanks @GreenSock - you wear that cape well!  😁

 

I guess even though I don't need the yellow 'boxes' section pinned, it needed to reference the container!

 

May our God bless you and GreenSock. Seriously.