Canvas animation as background

[jasoncrouse]

Hi! I'm trying to use a background video on top of which headlines should appear while scrolling down, and then, once done, the animation scrolls out of view and the rest of the page content (regular stuff) starts scrolling in. Following the advice given on a few threads (thank you!) to make the video play smoothly, I converted it into a sequence of images (thanks, ezgif!) and put together this demo.

 

Now, is this a good start to add headlines on top that appear for a couple of wheel scrolls, and have the whole thing scroll away once it's done, while more content on the page scrolls in? Could someone provide an example of what the code would look like?

 

TIA, 

Jason

 

See the Pen GRLmexd by gtermini (@gtermini) on CodePen

[GSAP Helper]

Sure, it seems like it's working as expected, right? 

 

Go ahead and start trying to add the effects you described and then if you get stuck, post back here with a minimal demo that clearly illustrates the problem and we'd be happy to answer any GSAP-specific questions. 

 

Hint: Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow and these forums aren't intended to be used for having other developers build your project for you). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps. 🙂

 

Before you know it, things will fall into place one at a time.

 

Good luck!

[Cassie]

Tip to get you going, it'll likely help if you add this image sequence to a timeline. Right now the function's returning a tween so you can place it into a timeline using .add

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

[Rodrigo]

Hi,

 

Here is another demo:

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

 

It uses an actual video but the principle is basically the same.

 

Hopefully this helps.

Happy Tweening!

[jasoncrouse]

Thank you all, you cannot imagine how helpful this was! I made some progress and cleaned up my code a bit and made a new Pen. My questions (apologies in advance if they're very basic questions, I'm still learning):

 

1. Could you take a look at the source code and see if there are any glaring issues, or things that could be cleaned up or optimized or done differently?
2. I put a div on top of the canvas to apply a blue tint. Is there a way to animate that div to make its opacity change during the animation, so that from 0.7 goes to, let's say, 0.5? Any other suggestions on how to apply that tint without "hardcoding it" in the images?
3. The "cool tagline" seems to have an issue related to the fact that the container div has display: flex, and when I add markup, it messes up the order. What am I doing wrong there?

You guys are the best, I'll definitely donate!!

 

See the Pen qBwXZow by gtermini (@gtermini) on CodePen

[GreenSock]

4 hours ago, jasoncrouse said:

• I put a div on top of the canvas to apply a blue tint. Is there a way to animate that div to make it's opacity change during the animation, so that from 0.7 goes to, let's say, 0.5? Any other suggestions on how to apply that tint without "hardcoding it" in the images?

Sure, just put this at the end of your timeline: 

.to(".background-tint", { opacity: 0.5, duration: tl.duration()}, 0)

Notice it's duration is the whole duration of the timeline, and it's being inserted at a time of 0, thus it takes up the whole animation. 

 

4 hours ago, jasoncrouse said:

1. The "cool tagline" seems to have an issue related to the fact that the container div has display: flex, and when I add markup, it messes up the order. What am I doing wrong there?

I read that a few times and I'm still totally lost. Sorry - can you please be very specific about what the problem is and how we can reproduce it? What markup did you add exactly? How did it "mess up"? 

[jasoncrouse]

Jack, thank you! For others trying the same trick, I'd like to point out that tl.duration() will work if you put that line AT THE END of the sequence, as Jack said. At first, I had added it at the very beginning and it wasn't working at all.

 

As for the other question about the tagline, I should learn to not write my requests after a long day at work, when my brain can barely put two sentences together

 

Anyway, when you scroll to the part that says "goes here, a cool tagline...". The sentence should actually read "A cool tagline goes here..." but for some reason the words are displayed out of order. I hope it makes sense now

[Cassie]

Hey, that's more of a CSS question, we try to keep the forums to GSAP questions but this is an easy one so I'll help.

 

You don't need flexbox on that tagline at all. Flex is for laying out elements on a responsive 2D grid. You've got a p tag there, with some elements (bold tags) and some text in the innerHTML. Flex will arrange the bold tags but can't do anything with the text. It's not made for use on text elements like this.

I assume you just want to center the text? Something like this would work.

#animation-container .tagline {
  position: fixed;
  text-align: center;
  width: 100vw;
  top: 50%;
  transform: translateY(-50%);
}

 

[jasoncrouse]

Hi Cassie, 

 

Sorry for going "offtopic" with my question, and thank you for looking into it anyway. I really appreciate it! Such an elegant solution.

[jasoncrouse]

Hi guys, I'm really happy with how the animation turned out. I have one last question. I need to add a sticky header above the block where the animation is. Now, this causes the block to scroll up by the height of the sticky header, as you can see in the updated pen below. Is there a way to prevent that? I was thinking of calculating the height of the header in javascript and adding it to the "start" parameter, but it looks like I'm not doing it right? Suggestions?

 

See the Pen qBwXZow by gtermini (@gtermini) on CodePen

[Cassie]

A position: sticky header will behave as relative until scrolled and "stuck" to the top of the screen, then it behaves as fixed. So the content will sit underneath the header and then scroll underneath.

 

If you don't want the content to sit underneath and then scroll, just make the header position fixed- then the content starts off in the right position, no need to use JS to fix anything.

 

 

 

[jasoncrouse]

Fantastic! It worked. You're the best!!