Help Needed: Combining Scroll-Based Div Resizing with Text and Image Animations Using GSAP

[availablecode]

 

My Problem:

 

I can't make the transition between the two animations in my CodePen so that they are combined into a single smooth animation.

 

What I'm Looking for in the Animation:

1. Global Animation: The two animations below should be combined into a single smooth animation.
2. Resize on Scroll: During scrolling, a div should resize until it reaches a certain size on the left side.
3. Text Appearance: Once the size is reached, text should appear on the right side.
4. Image Change: For each section of text, a new image should appear.

Technical Details:

• Div Resizing: The div should gradually change size based on scrolling until it reaches a predefined width on the left side of the screen.
• Text Appearance: The text should appear smoothly after the div has reached its final size. Each section of text corresponds to a different scroll step.
• Image Change: Each new section of text should trigger the appearance of a new image.

What I've Tried So Far:

1. GSAP ScrollTrigger: I've used GSAP ScrollTrigger to try and trigger the animations on scroll. I managed to resize the div, but then I can't get the text to scroll alongside it.
2. GSAP Timeline: I tried creating a timeline with GSAP to sequence the animations, but I'm having trouble synchronizing the text appearance and image change with the div resizing.
3. CSS Transitions: I also tried using CSS transitions for resizing, with a fixed position.

Additional Information:

• Sketch: I have attached a sketch to help illustrate what I'm aiming for.
• YouTube Link: Here is a YouTube link showing the expected result in two parts after resizing:

Youtube Link : 

 

 

See the Pen KKLWYdR by rmymartinet (@rmymartinet) on CodePen

[mvaneijgen]

Hi @availablecode welcome to the forum!

 

For the first animation check out the Flip plugin https://gsap.com/docs/v3/Plugins/Flip/ it will do all the heavy calculations for you. Don't be scared to fake this effect by having multiple elements and swapping them with setting opacity, I think otherwise wit will get really complicated if you really only need to use one element. 

 

Next everything in GSAP starts with an animation even the once on scroll, so the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I would thus first focus on the animation, the demo you used is a great reference, but is build for this specific animation and will be harder to modify for your requirements. I would keep it as a reference, but start fresh with first the flip tween and then hook it all to one timeline and try and build the animation as if someone is scrolling, but just leave ScrollTrigger out of it ,for now. I've written a post a time back and have noticed people really get how it works thinking the way it gets explained there, so try it out and see how far you'll come. Hope it helps and happy tweening! 

 

 

 

[availablecode]

@mvaneijgen  Always good to see you giving good advice, thank you very much! Sometimes, the simplest solutions are the best. I encountered difficulties while trying to animate my content based on scrolling. I tried various methods, but the solution eluded me. Then, after a few coffee breaks, eureka! A simple fixed position and a ScrollTrigger did the trick.

 

 

See the Pen qBGmOxL by rmymartinet (@rmymartinet) on CodePen