jasoncrouse

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

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? https://codepen.io/gtermini/pen/qBwXZow

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.

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

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): 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? 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? 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!! https://codepen.io/gtermini/pen/qBwXZow

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 https://codepen.io/gtermini/pen/GRLmexd