Pinning logo and its section to header after DomContentLoaded Construction

[RandyHowk]

Here is the demo, I've got everything just about where I want it except I'd like for the logo, and its section to move to the top and be pinned there after its construction triggered by "DomContentLoaded" while the other sections scroll as they do now below it. Sure this is a simple thing to do but not having luck moving anything with the .to method.

Thanks for the help this is pretty cool, taking me back to my flash days!

See the Pen pvooMMd by RandyHowk (@RandyHowk) on CodePen.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen ExqXdBx by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[RandyHowk]

Rodrigo, 
Thanks! It looks like they are using Flip to move and scale the logo, which I wouldn't have thought of immediately. I just have to adjust to have it happen sequentially after load and logo complete, not Scrolltrigger. And of course Pin it indefinitely to the top. Thanks this moves me closer!

[RandyHowk]

I've got the whole thing pretty close to what I want here:

See the Pen pvooMMd by RandyHowk (@RandyHowk) on CodePen.

but when I try to run in Nextjs here:
https://stackblitz.com/~/github.com/Vaene/OWIC-Next
None of the animation works. I forked off of the NextJS demo and the original animation works on scroll, but mine does not. Any advice would be appreciated!

[Rodrigo]

Hi,

 

I'm getting this when I try to open that link:

As we understand that creating a Stackblitz demo from a repo is fast and easy, unfortunately we can't update and save changes in those code bases, that is why we ask for a minimal demo that clearly illustrates the issue.

 

Finally be sure to use our useGSAP hook when working in React/Next:

https://gsap.com/resources/React

 

Happy Tweening!