Jump to content
Search Community

Gsap + scrolltrigger used to create full-height panels with animations within them - few issues...

digital_source test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello there,

 

First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work.

 

Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve:

 

1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all?

2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2?

3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it?

 

Thanks.

M.

See the Pen VwpKpVG by shx420 (@shx420) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums, @digital_source

 

You'll definitely have a better chance of getting a prompt and accurate answer if you take the time to create a very minimal demo of each issue. Right now, you've got a lot going on, almost 1000 lines of code between HTML/CSS/JS. 

  1. I didn't notice the fade issue. I must be missing it. I scrolled up and down a bunch of times and didn't see a sudden jump in opacity or anything. Help?
  2. I don't have time to dig through all the code right now, but my guess is that you've got logic problems in your code where you're animating the same properties of the same objects at the same time (conflicts). Perhaps when the one timeline begins, the other hasn't finished and it's in the middle of animating the height which affects the starting values of the new timeline that's running. 
  3. Similar to #2, I bet you've just got a bunch of animations stacking up on top of each other, stepping on each other's toes. You could add some logic to your onLeave/onEnterBack to force the animation from the previous section to its very end so that you don't have the sloppy contaminating overlaps. You could also get super advanced and speed up your animations' timeScale when the user scrolls faster. 

Is there a reason you don't want to use scrub? It'd avoid all the potential overlaps/conflicts and the logic issues scrolling fast, etc. 

Link to comment
Share on other sites

Hi,

 

Thanks for your quick reply @GreenSock! Ehm, yes, as for the 'minimal demo', the code that I've prepared was supposed to be that (it's a part of a bigger sequence) but I have to admit, looks like I got carried away a little ;) So apologies for throwing such a large wall of text at you. But your answer has got me thinking and pushed me in the right direction, and I solved the problem (or at least found a workaround that works for me). Probably a trivial thing for you, but I wasn't able to find an example like that online before, so I'm attaching a codepen below, maybe someone will find it helpful.

 

So, generally speaking, what I did was: I created one master timeline that holds all the animations, with the labels added to mark start and end of each sequence. That timeline is paused then when the page loads. After that, it's being controlled by stand alone ScrollTriggers callbacks - playhead is moved to the right label depending on scroll position. Thanks to that, the animations never overlap and conflict with eachother, everything works smoothly and I achieved an effect kind of similar to fullPage.js, which I wanted. Also, I think it shouldn't be hard now to modify it to speed up the animations depending on scrolling speed etc.

 

So, once again, thanks for your help!

 

See the Pen JjWErNM by shx420 (@shx420) on CodePen

 

  • Like 1
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...