ScrollTrigger Text pinning

[SB0912]

Can anyone help me with a few items on this animation? I'm relatively new to HTML/CSS/gsap and would love some insight:

• I can't seem to figure out how to keep the text from moving during either the beginning or end of the animation and I would like it to stay static throughout the entire scroll.
• Does anyone have any ideas on how to make the "doors" open in a spiral pattern (i.e. they continue to rotate as scrolled instead of just opening side to side on the X-axis)

*Edit: open the codepen in a new window to see my issue, the embedded window seems to be having its own issues due to resizing im sure

See the Pen poxEmdy by Slater-Bernstein (@Slater-Bernstein) on CodePen

Edited April 19, 2023 by SB0912

[Rodrigo]

Hi,

 

The issue with the text is related to the structure of your HTML:

<img class="reveal" src="https://img.theculturetrip.com/1440x807/smart/wp-content/uploads/2016/05/the_abduction_of_the_sabine_women__met_museum_of_art_46-1601.jpg">
<h1>Hello World</h1>
<section class="open">
  <div class="box1"></div>
  <div class="box2"></div>
</section>
<section></section>
<section></section>

In your GSAP instances you're basically pinning every element in it. Why not put everything in a single container, just pin that container and create a single timeline for the entire animation?

 

Something like this:

See the Pen eYPBOrW by GreenSock (@GreenSock) on CodePen

 

Hopefully that's enough to get you started.

Happy Tweening!

[SB0912]

I was able to fix the pinning issue with your suggestion and a few minor tweaks, looks better so far thank you! Do you have any suggestions or links you can send on how I might be able to adjust any resizing issues? I find that I have to adjust some small values when I transfer the code to the codepen window and would like to make the page fluid so I can show it off on variable screen sizes/mobile devices. Thanks

[Rodrigo]

Hi,

 

 You could use GSAP MatchMedia for creating responsive animations, it's super easy and simple and you don't have to worry about killing, removing, reverting anything between breakpoints, GSAP does that for you!

 

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!