PNG Sequence within pinned section

[DevC]

Trying to understand how to scrub through a PNG sequence only once it's revealed in a pinned stack of absolutely positioned sections.

See the Pen wvPvXQb by dcha (@dcha) on CodePen

[Rodrigo]

Hi,

 

Right now your example is using a video element and seems to work as expected.

 

If you want to use a bunch of images I'd strongly recommend you to use canvas, as it seems you're trying, but is not really clear to me TBH.

 

Take a look at this example by @OSUblake and I think you should be on your way:

Hopefully that helps you get started.

 

Happy Tweening!

[DevC]

11 hours ago, Rodrigo said:

##

 

There's both in the code. Can you have another look?

[DevC]

I've simplified the code so the video piece doesn't confuse anyone. The desired outcome is a pinned container with 4 stacked sections within. I'd like each section to stay pinned until you've scrolled through the full animated sequence. I've thought using a scroller might be the solution or a timeline within a timeline, but I know these can get very complicated.

[GreenSock]

You made one of the most common mistakes - you nested a ScrollTrigger in an animation inside a timeline that has a ScrollTrigger. That's logically impossible - the playhead can't be controlled by both the parent timeline AND the scrollbar position. 

 

Here's a fork that just uses that one timeline/ScrollTrigger: 

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

 

I'm not entirely sure how you want things to work, but hopefully that gets you moving in the right direction. 👍

[DevC]

Thanks for the help. This is getting closer, but one thing I can't figure out. Each `scene` is going to have it's own image sequence. I need to run through the sequence before transitioning to the next scene. Playing with your example, after adding any siblings after the one with the image sequence it no longer scrubs through the images.

For simplicity, this fork doesn't actually use anymore image sequences, only more scenes. Don't want to complicate.

See the Pen rNKgbJp by dcha (@dcha) on CodePen

 

[Cassie]

Heya, 

So this largely comes down to an understanding of the position parameter and how and when each tween is being adde to the timeline
 

In your latest example the canvas image sequence tween has no position parameter so it's being added in at the end of the timeline, you want to add that tween in when that section is actually visible.

So as you loop through the sections, check if it's a section with a canvas sequence, and add that tween in.

See the Pen JjZQYVr?editors=1011 by GreenSock (@GreenSock) on CodePen

Take a little look at the position parameter here...
 

 

If you're a bit confused I'd suggest trying to write the timeline out without a loop, that's what gets most people muddled! Just write each step manually. Timelines are hard enough by themselves without being abstracted away.

 

[DevC]

You rock. Thank you.

 

For any future visitors, this type of component thoroughly borked the order of my tweens. If you find yourself with mismatched start points on the subsequent pieces, you'll want to check out `refreshPriority`.