xoxoxoxo

Zach, Back to my original pen here: https://codepen.io/taher-space/pen/poyPypy (forked it for you) - Do you see how there is more room to scroll when the interim div reveals? In your solution I see it the image follows instantly and if I increase interim's height to 200vh the content below are lost. If you increase the height of interim div in my example you can see the content in the back stays similar.

Whoops, sorry. Do you see how the first two divs behave? Where the text div is pinned and the image div comes in and both moves up, normally. I expect this to happen for the content that's below the violet background. The content below just breaks that functionality.

This seems to fix the jump but it breaks how .layer and .cover divs behave... You can see it Here

Hi folks, Absolutely love the new ScrollTrigger plugin! I have an `.interim` div which basically stays in the normal flow. The `.group` div below should be fixed so it feels like the `.interim` div is revealing the `.group` div. This works fine with the code I've written, however I see the scrollbar on my browser jumps a bit and I know it has to do with toggling position. Is there an elegant way to do this?

Are you suggesting using timeline? Cause I feel like I need to calculate image's boundingRect onUpdate in order for it to reveal within the viewport range. I can have it separately but then I can't seem to calculate image's rect within timelines.

Basically while my images move up I'm trying to loop through each image and toggle their opacity on/off except for the last image. Since I have a condition to flash the images that are only within the viewport they aren't sequential. For this, I'm maintaining an internal counter and when it equals to the image's array length, that image's opacity should stay on and turn on rest of image's opacity with stagger. (I'm doing this in my timeline onComplete) I've noticed that the last image's opacity turns on rarely. (after many refreshes). Do you know what might be causing this?

@ZachSaucier Thanks a lot! This was very helpful. I have to create my own "onComplete" flag when all images are done flashing. Maybe not the best looking solution but it works. However, I only sometimes see my last image's opacity to 1. I should be seeing when the count equals to the total elements. Not sure what's causing this? I don't see tl's onComplete function trigger either. It happens after many refreshes though. Is this cause of the onUpdate ticks?

I have a bunch of images that moves the Y value continuously and while they're moving up I'm turning their visibility on/off. I'm calculating respective image's y position to ensure they only show within 20-80% of the viewport. 1. Is there a way to find out if all images have been turned on/off? (I keep a data flag for this) 2. Is there a way to find out if last image is being toggled on? Ideally, I'd like to keep the last image's opacity turned on and then turn every image's opacity on like this: gsap.to('.box', { delay: 0.5, opacity: 1, stagger: 0.2 })

I have a bunch of images that moves the Y value continuously and while they're moving up I'm turning their visibility on/off. I'm calculating respective image's y position to ensure they only show within 20-80% of the viewport. However, this isn't accurate. Not sure why? Is there a way to find out if all images have been turned on/off? (I keep a data flag for this) Is there a way to find out if last image is being toggled on? Codepen: https://codepen.io/taher-space/pen/wvaOMRZ?editors=0010

I have two separate animations: 1. images scrolling in/out of viewport 2. toggling visibility of image When the images toggle on/off you can see sometimes it appears partially below the fold, and then never makes it high enough or is so high up that it's offscreen in a few frames. How can toggle on/off images that are moving within the center of the viewport? Doesn't have to be exact center but somewhere around it. Do I have to use IntersectionObserver for this?

I figured it out by adding an empty set and overall delay to 0. .set(container, { backgroundColor: el.getAttribute("data-bg") }) .set(el, { opacity: 1 }) .set({}, {}, "+=2") .set(el, { opacity: 0 });

@ZachSaucier The background color and opacity 1/0 doesn't seem to sync together? I'm not sure if moving positions would help? Perhaps creating a timeline and adding it to an array and playing each one of them together with 1s? I'm not sure how achieve this though. The image, background and opacity should be connected like a layer I think.

Haha. Sorry, I should give a warning! Although, this should run on a different tween, I'm trying mix them all together. The colors and images don't seem to come in and go out at the exact same time.

Yes. Opacity and background color should be set at the same time. As you can see in my code there is an odd delay between these.

I'm trying to turn each box's opacity on and off with respect to the background color. for ex, When the box's opacity is 1, the background color should also be set at the same time, and when the box's color is 0, the background color should also go away...rendering the next box. After it loops through all box's, onComplete it should stagger all the element's opacity on. I believe this has to do something with overlapping? Here's the demo

Thanks for this! Another question would be: How can I instantly set opacity 1, then 0, and element's background all together? t1 .set(el, { opacity: 1 }) .set(container, { backgroundColor: el.getAttribute("data-bg") }, '-=0.1') .set(el, { opacity: 0 });

Hello, I'm trying to animate the images out of the viewport and then make them appear from the bottom as if they were wrapping around the height of the viewport. I'm trying to repeat this N times and then make the animation stop at the original position of the images. Note: "0" on transform values doesn't start from the bottom My modifier/wrap function doesn't make sense and I can't figure out how to fix t. Any help would be appreciate it!

I'm trying to group animations for different elements and it doesn't seem to move other elements except the first one on the chain: const tl = gsap.timeline({ defaults: { ease: 'back.out', duration: 1.5, force3D: 'auto' } }) .to('.el-1', { translateY: -$(splash).height() }) .to('.el-2', { opacity: 0 }) .pause(); t1.progress(count); The second element ".el-2" doesn't seem to tween. I have to create a seperate timeline. Is there a way I can chain diff elements and control it with one variable?