Jump to content
Search Community

ScrollTrigger and Lottie, Elements Disappearing

jimkill test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

This is my first attempt at gsap and of course I'm diving in the deep end. I am building an infographic landing page that has elements build in on scroll. I was able to successfully get the text/divs to animate in on scroll and then it took me all day to figure out how to connect scrollTrigger to the Lottie files. It's working now except that elements start disappearing once you are a ways down the page. I'd love some help in fixing that issue, cleaning up the code ,simplifying and learning how to make it better. 

 

One thing that I have not been able to figure out is on the checklist portion making the second column come in with a delay. 

See the Pen QWvOOYG by jimkill (@jimkill) on CodePen

Link to comment
Share on other sites

  • jimkill changed the title to ScrollTrigger and Lottie, Elements Disappearing

Hi @jimkill. Welcome to the forums (and GSAP)! 

 

Did you know there's a helper function in the docs that makes it very easy to hook up Lottie to ScrollTrigger? See https://greensock.com/docs/v3/HelperFunctions#lottie

 

It's a bit much to dig through almost 700 lines of JS/CSS/HTML, but if you still need some help after seeing that helper function, please post a minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions. 👍

Link to comment
Share on other sites

I used the helper function doc to get this far but it's more focus on scrubbing the animation instead of just playing like I have. I just simplified the demo even more. There is now just the two separate sections. There are a bunch of repeating elements but they seem to work just fine by themselves so I need them all to show how they are interacting with each other. Any help would be much appreciated.

 

Link to comment
Share on other sites

  • Solution

You can set scrub: false and pin: false on the helper function, just so you know. 

 

I noticed several things:

  • You were loading in Lottie files that were getting swapped in AFTER the page loaded and those elements shifted the layout around because of the space they took up. That's why things seemed to disappear prematurely - the start/end positions were calculated BEFORE you loaded all that stuff in, so the shifting threw it all off. You need to call ScrollTrigger.refresh() AFTER you're done shifting the DOM around. You can do that in a DOMLoaded event on the Lottie animation object.
  • There was a lot of repetitive code that could be consolidated into loops.
  • Transforms and opacity were being set outside of GSAP in one spot - I'd strongly recommend against doing that.
  • The gs_reveal code needed refinement. You were revealing things when they're already almost 25% into the viewport, but there was no onLeaveBack that hid them so it looked weird to have them visible and then suddenly jump to invisible and animate in when you hit that 25% threshold. A lot of that code could be tucked into a single onToggle with some conditional logic. And I created a separate ScrollTrigger for each to sense when it goes out of the viewport in the backwards direction and hide them. 

Here's the way I'd probably do it: 

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

 

More functionality, but about 1/3rd of the code 👍

 

I hope that helps. 

  • Like 3
Link to comment
Share on other sites

Very helpful thank you! I'm just getting started with GSAP so I really appreciate you taking the time to walk me through it and help me learn. How would I go about adding a 1 second delay to the right column of check marks so they come in after the left column has loaded?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...