Chris Heuberger

Applying some insight from Carl's demo, I think I have my solution: https://codepen.io/ChrisBup/pen/qBPJRyz While not strictly responsive, I used breakpoints to at least make it adaptive by specifying hard-coded markup versions of the title based on screen width which allows me to group and control the title by line as well as letter.

Oh thanks @Carl ! That is very helpful.

Hi all, I have a working prototype using GSAP SplitText (displayed at the bottom of this post) which stagger-reveals a title, by changing position and opacity of each letter individually. What I'd like to do is mimic the text reveal animation here: http://loveforiceland.com/ which animates each line simultaneously while still stagger-revealing each letter. And the way the letters are revealed are by moving up from behind a kind of mask instead of fading in by animating the letter's opacity. This example gets close: https://codepen.io/camcgreen/pen/qBqMPQp but reveals each line as a whole instead of letter-by-letter. Additional requirements: 1. <a> tags be preserved in the title (as they are in my prototype) 2. The title must be responsive which I imagine means the initial markup can't be grouped by line since line breaks will depend on screen width. Is this possible with GSAP? Thanks!

Thanks! For anyone interested down the line, I made a slight modification just to prevent aspect ratio distortion when initial width or height are defined as auto instead of a percentage: https://codepen.io/ChrisBup/pen/oNwXewJ

Can this method be applied to animate a background image size from a percentage to cover? So from background-size: 150% auto; to background-size: cover; Using the original function doesn't seem to work as configured: https://codepen.io/ChrisBup/pen/ExmjWRW

Ah yes, I was just posting that same fix about the position, thanks. But I don't quite grasp the start/end distinction. What is that updated line saying?

Thanks for the reply! When I move that snippet outside of the forEach() loop and remove the toggleActions, the issue persists (at least in Chrome and Firefox): https://codepen.io/ChrisBup/pen/VwpvGyZ The issue being: after the three trigger panels have reached the top, continuing to scroll puts the third trigger panel back at the bottom requiring the user to scroll past it again. The attached screenshot is what I'm trying to avoid. When the red box becomes unfixed and starts to scroll, the section that "pushes it up" should be the "ensuing content" section, not the "trigger panel three" section.

Hi, I'm trying to use GSAP ScrollTrigger to fade 3 fixed headers in and out sequentially with transitions that are tied to 3 trigger panels, each with scroll snapping behavior based on this demo: After the 3 trigger panels have been scrolled, I'd like normal scrolling to apply so that the entire header section scrolls out of view along with the ensuing content (sort of like the featured projects section here: https://katiforner.com/). The attached CodePen is almost there but when the content section is reached, the third trigger panel reappears for some reason and must be scrolled again before ensuing content scrolls into view. Any idea what's going on and how I can get that header section to seamlessly scroll up with the content section? Thanks, Chris H

I have four timelines, all paused, using MorsphSVG, and I have four buttons that play their respective timelines on click. The problem is that each timeline animation will only play once. Even though each button is properly registering clicks (see console log), clicking a button a second time (after clicking another button to reset the animation) doesn't re-run the animation.